越来越多的小伙伴不满足于在现有的博客网站上写文章，想完全根据自己的喜好构建一套，程序员可以互相交流技术，文青也可以彼此交换想法。基于Hexo+Github是目前采用比较多的方式，Hexo重要的特点是拥有丰富的官方文档、插件和主题等，所以本文就来介绍如何一步步构建构建自己的博客网站。

基于Hexo建站

  本人采用的环境为mac，其他环境下的操作步骤也比较类似，安装过程中有遇到问题可以自行搜索，也可以在文章下面留言。

  1. 环境准备，首先确认是否安装以下软件

    • Node.js
    • Git

  2. 安装Hexo

    1
    npm install -g hexo-cli

  3. 初始化Hexo。

    1
    2
    # 设置用来放置博客的文件夹blog
    hexo init blog

  4. 继续执行。

    1
    cd blog && npm install

  5. 新建一篇文章。

    1
    hexo new "first article"

    新建文章位于../blog/source/_posts/first-article.md。

  6. 生成网站。

    1
    2
    3
    hexo generate
    # 或者
    hexo g

  7. 启动本地服务器

    1
    2
    3
    hexo server
    # 或者
    hexo g

  8. 浏览器登录http://localhost:4000，即可查看自己刚发布的文章，Ctrl+C会停止服务。

部署在Github

  1. 在Github上新建一个仓库，仓库名称格式为“用户名”.github.io，比如vosang.github.io。

  2. 安装部署工具

    1
    npm install hexo-deployer-git --save

  3. 修改配置文件_config.yml，位于../blog/_config.yml，在文件最后修改配置信息如下：

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:Vosang/vosang.github.io.git
      branch: master

  4. 部署

    1
    2
    3
    hexo deploy
    # 或者
    hexo d

  5. 等部署完之后，登录https://vosang.github.io/就可以看到效果了。

安装主题

  Hexo官网提供了丰富的主题，主题地址。本人选了一款具有简洁风格的主题—Maupassant（莫泊桑），在此要谢谢原作者。网站效果。

  1. 下载主题，将主题包下载到themes文件夹下，可以看到文件里面就是Hexo默认的主题包。

    1
    2
    cd blog
    git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

  2. 可以看到themes文件夹下面除了默认主题外又多了一个文件夹maupassant。

    1
    2
    drwxr-xr-x  12 vosang  staff   408B 10 29 14:18 landscape
    drwxr-xr-x  11 vosang  staff   374B 10 29 14:50 maupassant

  3. 安装依赖。

    1
    2
    3
    4
    # 现在jade已经被pug替换，所以直接安装pug
    # npm install hexo-renderer-jade@0.3.0 --save
    npm install hexo-render-pug --save
    npm install hexo-renderer-sass --save

  4. 修改配置文件_config.yml，设置theme。

    1
    2
    3
    4
    5
    6
    # 修改主题名称
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    #theme: landscape
    theme: maupassant

  5. 选择语言，该主题默认情况下是英文，如果要改为中文，修改配置文件_config.yml

    1
    2
    # 设置语言
    language: zh-CN

    进入到../blog/themes/maupassant/languages文件下，发现里面是各种yml文件，这里就是语言包，根据文件的名字来选择语言，比如选择中文就是采用zh-CN.yml作为映射文件。

  6. 默认是没有”关于”页面的，下面来新增关于页面。

    1
    2
    # 新增一个about页面
    hexo new page "about"

    可以看到生成一个source文件夹下面新生成了一个about文件夹，直接编辑index.md文件，具体路径是~/blog/source/about/index.md。

  再次部署，就可以看到了一个博客的雏形了。下面再具体介绍如何发布文章以及一些细节问题，比如设置文章摘要、类别和标签等。​