使用 HEXO + Github 自建博客

使用 HEXO + Github 自建博客

搭建环境准备

• 安装 node.js
• 安装 git
• gitHub 账户配置

Hexo 使用

• 安装Hexo

在合适的地方创建一个新的文件夹. 例如, 我的电脑为 mac, 以 ~/Des

npm install hexo-cli -g

npm install hexo --save

输入 hexo -v 查看以下是否安装成功

• 配置Hexo

  初始化

  hexo init
  npm install // 之后npm将会自动安装你需要的组件，只需要等待npm操作即可。
  

  体验HEXO

  hexo g
  hexo s
  # hexo server -p 端口号 # 使用指定的端口号
  

• 将Hexo与github page 联系起来

  打开_config.yml 文件，配置 Deploy 属性

  # Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
      type: git
      repository: [email protected]:chinaofmelon/chinaofmelon.github.io.git
      branch: master
  

  repository 填写的是 github 上的项目地址

• 安装部署扩展

  npm install hexo-deployer-git --save
  

• 发布文章

  hexo d -g
  

添加插件

例如添加sitemap和feed插件

进入 hexo 根目录

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改 _config.yml 文件

    # Extensions
    Plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
    #Feed Atom
    feed:
        type: atom
        path: atom.xml
        limit: 20
    #sitemap
    sitemap:
        path: sitemap.xml

执行 hexo d -g, 访问 https://gdutxiaoxu.github.io/atom.xml 和 https://gdutxiaoxu.github.io/sitemap.xml ，发现这两个文件已经成功生成了。

404 页面添加

GitHub Pages 有提供制作404页面的指引：Custom 404 Pages

直接在根目录下创建自己的404.html或者404.md就可以。

注意: 自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。

推荐使用腾讯公益404

多电脑实使用 Hexo

创建两个仓库(分支)，分别管理 hexo 生成的博客与 hexo 本身的代码。

实现步骤

1. 创建仓库

2. 拷贝 hexo 仓库到本地

3. 通过Git bash依次执行

   npm install hexo
   hexo init
   npm install
   npm install hexo-deployer-git
   

4. 修改 _config.yml 中的deploy 参数

5. 正常 push 代码到 github 上

6. 执行 hexo g -d 生成网站代码并部署到 github 上.

关于日常改动流程

先在本地对博客进行修改，然后先 push hexo 本身的代码，然后再生成博文部署到 master 分支上。这种操作保险。如果顺序调换的话，可能会出现网页数据部署不准确的问题。

其他电脑搭建 hexo 环境修改

1. clone hexo 分支

2. 在分支下执行

   npm install hexo
   npm install
   npm install hexo-deployer-git
   

**注意: 不需要hexo init这条指令 **

Hexo 主题配置

1. Concise

   该主题使用了 less 编译，Hexo 默认的编译器为 hexo-renderer-stylus 要切换为 hexo-renderer-less

   npm install hexo-renderer-less --save
   # npm uninstall hexo-renderer-stylus --save # 卸载 hexo-renderer-stylus，如果你不需要的话
   hexo clean
   hexo server
   

   刷新页面查看新主题效果，Concise 主题的具体配置到 这里。

2. jsimple 仿主题

   使用参考这里

3. hexo-theme-Aath

   使用参考这里

Hexo 使用快速入门

欢迎使用 Hexo! 您可以从 文档 获取更多的关于 Hexo 的信息. 使用过程中如果有问题可以到 问题解答 或者GitHub 上提问.

快速入门

新建一篇文章

$ hexo new "My New Post"

详情: Writing

启动服务

$ hexo server

详情: Server

生成静态网页

$ hexo generate

详情: Generating

部署网站

$ hexo deploy

详情: Deployment