可无


  • Home

  • Archives

  • Search

基于GitHub Pages + Hexo 免费搭建博客网站

Posted on 2018-11-20

关于Hexo

Hexo中文官网

Hexo是一个快速、简洁且高效的博客框架,Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

MarkDown介绍

Markdown 是一个 Web 上使用的文本到HTML的转换工具,可以通过简单、易读易写的文本格式生成结构化的HTML文档。目前 github、Stackoverflow 等网站均支持这种格式。

关于markdown简单几句话说不清,可以点此进入markdown中文介绍页面了解详情

搭建前的准备

GitHub账号

1
GitHub是一个面向[开源](https://baike.baidu.com/item/开源/20720669)及私有软件项目的托管平台,也是全球最大的开源协作社区,通过GitHub,既可以让别人参与你的开源项目,也可以参与别人的开源项目。

而我们此次要介绍的搭建博客的方法,依赖于GitHub为其用户免费提供的GitHub Pages服务。以下是官方对于GitHub Pages的介绍

GitHub Pages是一种静态站点托管服务,旨在直接从GitHub存储库托管您的个人,组织或项目页面。

1
既然是免费的,肯定有着一些限制:
  • GitHub Pages源存储库的 建议限制为1GB。
  • 发布的GitHub Pages网站可能不超过1 GB。
  • GitHub的网页的网站有一个每月100GB的带宽限制。
  • GitHub Pages网站的限制为每小时10个版本。

安装环境

以下配置只在我自己电脑中(Windows10 64位)安装过,不保证在其他环境也能成功。

安装 Hexo 相当简单。然而在安装前,必须检查电脑中是否已安装下列应用程序:

  • Node.js
  • Git

安装 Hexo

必要的环境安装完成后,即可使用 npm 全局安装 Hexo。

1
npm install -g hexo-cli

安装hexo
检查是否安装Hexo完成,查询是否成功,显示hexo-cli版本就说明成功了
hexo -v

建站

安装一切所需的环境后,我们可以开始建站了 新建一个文件夹,用来管理我们的博客项目,
新建blog文件夹
打开命令行工具,分别运行以下命令。

hexo init <folder> 用hexo-cli工具初始化项目文件夹
cd <folder> 进入刚新建的文件夹
npm install // 安装依赖
太长了就不截图了

访问URL

我们可以运行看看Hexo创建的博客站是什么样的,运行以下命令

1
2
3
4
5
6
7
hexo server
/*
选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式
*/

或者

1
hexo s

在地址栏输入http://localhost:4000/访问本地Hexo服务器,按crtl+C停止运行hexo服务器
hexo server

好了,到这里我们已经学会了通过Hexo创建本地博客了,接下来将介绍如何将我们的博客上传到我们的GitHub服务器上

上传到GitHub

GitHub创建repositories

进入GitHub官网,或者在浏览器输入https://github.com/,如果还没有账号就创建一个账号就好了,这里不教大家怎么注册账号了。登录自己的账号,直接点击new repositories或者进入You repositories再new repositories

进入到创建repositories页面来,这里很重要,一定要注意哦!必须将新建的repository的名字为: 你的GitHub账户名.github.io,其他默认就好了。这里注意在创建GitHub用户名时一定要慎重考虑,因为这将决定你的GitHub Pages的域名

配置

GitHub的Repository创建好后。我们在回到本地的Hexo的Myblog项目中,我们用代码编辑器工具打开,notepad++就可以,找到在项目的根目录下_config.yml找到 deploy标签

在该文件下面添加

1
2
3
4
deploy:
type: git
repository: https://github.com/jiaiqi/jiaiqi.github.io.git # 复制过来
branch: master

注:repository: https://github.com/jiaiqi/jiaiqi.github.io.git 是自己刚刚创建的你的GitHub账户名.github.io的repository,在Clone with HTTPS里面,复制粘贴就好咯。冒号后面记得空格哦。branch后面是master就好了。
在_config.yml找到url进行修改为:

1
url: http://jiaiqi.github.io # jiaiqi是我的github用户名,修改为自己的用户名

写文章

1
hexo new [layout] <title>

如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,要用引号括起来。如:

1
hexo new "post title with whitespace"

部署

到这里就差不到了,接下来我们需要执行一些命令,将我们的博客部署到GitHub上了,惊喜将会到来了。 打开Git Bash Here进入blog根目录下,首先我们需要安装一下hexo-deployer-git不然可能出现错误,无法部署成功,执行命令行。

1
npm install hexo-deployer-git --save

然后在执行以下命令
注:每次提交时必须执行这三个命令

1
2
1. hexo clean
// 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
1
2
3
4
2. hexo generate # 生成静态文件。
// 选项
-d, --deploy # 文件生成后立即部署网站
-w, --watch # 监视文件变动
1
2
3
3. hexo deploy # 部署
// 参数 描述
-g, --generate 部署之前预先生成静态文件

或者简写方式

1
hexo clean
1
hexo g
1
hexo d

第一次执行hexo deploy命令后可能会弹出github登录页面,千万不要没登录就直接关掉了。

测试

我们进行访问https://jiaiqi.github.io/ 和 http://localhost:4000/一样的页面说明是已经成功。第一篇博客是hexo创建的默认文章。

总结

到这里,我们已经从如何使用Hexo到部署上GitHub上,当然了,此时还未对Hexo进行一些我们对于博客的美化,hexo可以让我们自定义自己独特风格的博客,关于hexo的更多使用方法比如如何创建文章、文章分类之类的去Hexo官网自己看文档吧。如何修改以及配置主题,等我的下一篇博客(当然了,下一篇不知道什么时候了,看心情吧)或者自己Google吧~

Hello World

Posted on 2018-11-20

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Jia Qi

2 posts
1 tags
© 2019 ©2019 by jiaqi