搭建自己的github.io博客

2018-07-08
#Github.io #Blog #Hexo
Blog

初衷

作为一名程序员，一直都有搭建自己博客的想法，一方面作为自己学习的积累，将所看所学用博客的方式记录下来，便于自己以后回顾，另一方面可以作为自己学习的一个动力。这几年思想上一直在CSDN、博客园和自己搭建之间徘徊犹豫，行动上一直用着印象笔记、OneNote、有道将就，直到有天查资料时误入某人的github.io博客，确认眼神的那一刻，我知道这就是我想要的。而作为github出品，其品质绝对是有保证的，最重要的一点是基于github的repo管理，这意味着咱们对其是有绝对的控制，和放在第三方的平台比，可控性要好太多。

关于搭建github.io博客，网上的教程很多，下面总结下我的Github.io的搭建过程。

搭建Github.io博客主要分为三步：

  1. 开通自己的github.io repo
  2. 选择一款合适的主题
  3. 编写发布博客

开通自己的github.io repo

1、 创建一个项目

2、 按格式输入项目名称

以上，就创建了属于自己的github.io，可以直接访问https://leitty.github.io/看看效果，只有readme.md的文件内容

可以在setting中选择一个jekyll的主题

选择一款合适的主题

当前流行的，适合github.io的博客框架有很多Jekyll、Hexo、Octopress等等。

短暂的折腾了下Jekyll和Hexo后，本人果断放弃了Jekyll，投向了Hexo的怀抱。Jekyll基于ruby,python，需要下载安装ruby,python，使用gem启动，官方文档有很详细的使用文档，但是做出来的页面不太符合个人的需求，选择了几个theme实验后，对页面仍不太满意，想折腾又没时间，于是转向了Hexo。Hexo基于nodejs，官方网站，有nodejs和git就能下载安装，而且nodejs和git更符合本人的知识储备。

按照Hexo的官方文档进行操作：
1、 安装Hexo脚手架

1
npm install -g hexo-cli

2、 创建网站

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

其中folder是本地创建的文件夹名

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

package.json中
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.1"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-migrator-rss": "^0.1.4",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.2"
  }
}

各文件夹的作用和配置文件的作用，可以查看官方文档，我们需要知道的有两个

_config.yml文件

网站的 配置 信息，您可以在此配置大部分的参数。

source文件夹

资源文件夹是存放用户资源的地方，我们创建的内容md文件就在source/_post文件夹下

针对有图片的文章，可以通过将config.yml 文件中的post_asset_folder选项设为true 来打开,Hexo将会在你每一次通过hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹，如图：

在文章中通过![](/example.jpg)语法来进行引用。

3、 本地运行Hexo网站

安装hexo-server

1
npm install hexo-server --save

运行

1
hexo server

即可在http://localhost:4000/ 看到网站的效果

1
hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

例如过hexo new first即新建了一篇first.md的文章，同时在_post文件夹下就出现一个first.md的文件

编写发布博客

1、 修改hexo站点的配置文件_config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/Leitty/Leitty.github.io.git
  branch: master

2、 进行部署

1
2
3
4
安装hexo-deployer-git
npm install hexo-deployer-git --save
进行部署
hexo d

3、再次访问你的网站

image

4、再次发布文章

根目录下输入 ：

1
hexo new "2018-07-09"

文章编辑完成后，终端在根目录文件夹下，执行如下命令来发布:

1
2
hexo g //生成静态页面
hexo d //发布

注意hexo g必须执行，将markdown文件转成public文件夹下的html才能进行发布。

参考：

https://hexo.io/zh-cn/docs/

https://blog.csdn.net/Hoshea_chx/article/details/78826689