GitHub&Hexo 搭建博客

2017-05-12 Technology

初入公司，第一个任务就是自己搭建一个博客。其实之前就一直想试一试自己搭建个博客，但出于懒，一直没有动手。直到，刚入职场，公司老板布置了搭建技术博客的任务，才正式对待这个问题。废话不多说，下面就用Github➕ Hexo的方法搭建一个简单的、属于自己的、可定制的博客。





==注意==：本文主要针对Mac版本，windows版方法类似。

环境

本文利用Github Pages进行远端部署博客后台，用Node.js的一个命令行工具hexo生成博客所需的静态页面。

安装Git

网上搜索git for mac[windows], 根据你的操作系统安装不同版本的git，建议地址: Git_For_Mac

安装Node.js

Node.js官网Node.js下载最新版。Mac下可先安装Home brew包管理器，然后用命令安装最新版。

brew install node

如果能够正常使用命令npm，代表安装成功。

npm --version

安装Hexo

安装完Node.js后，用Node自带的包管理器安装hexo。

npm install hexo-cli -g

能正常使用hexo命令，代表安装成功。

hexo --version

至此，环境已经搭建完成。接下来是对环境的补充说明，觉得没有必要的可以掠过这段。但很多人在搭建自己的博客的时候对各个需要搭建的环境并不清晰，我简要地理一下关系。

  • Git主要是本地生成的静态页面部署到远端（Github）；
  • Node.js是Javascript的运行平台，本文是hexo生成静态页面的引擎；
  • Hexo是Node.js的一个命令行工具，能够将Markdown编译为静态页面。

Hexo命令和配置

Hexo 几个常见的命令

1
2
# 生成一个hexo工程，文件夹[blogname]
hexo init [blogname]
1
2
# 生成一篇博文，可以路径[blogname]/source/_posts下面找到[passagename].md的文件
hexo new [passagename]
1
2
# 生成静态页面
hexo generate[g]
1
2
# 将本地代码部署到远端（这里指Github），需要在配置以后才能进行
hexo deploy[d]

Hexo 配置说明

在项目的主目录下，可以找到_config.xml，博客主要配置信息。重点说明以下参数：

  • 博客的主要信息：标题、副标题、描述、作者、语言和时区
1
2
3
4
5
6
title: Geek
subtitle:
description:
author: Huanjian Jiang
language:
timezone:
  • git配置信息：远程类型、仓库地址、分支和提交信息
1
2
3
4
5
deploy:
    type: git
    repo: git@github.com:zhuwo/zhuwo.github.io.git
    branch: master
    message: Final try
  • 主题
  1. 网上查找Hexo的主题，将主题模版放到路径[blogname]/themes，设置参数theme: master[主题文件夹名]
  2. 本人推荐的最流行的Hexo的主题next(可调整性强、内容丰富)，详情见它的主页：http://theme-next.iissnan.com/
  • 图片

添加图片的方法可以参考Hexo的官方文档：https://hexo.io/zh-cn/docs/asset-folders.html

主要过程

  1. hexo init 生成博客
  2. 修改配置文件_config.xml
  3. hexo deploy 部署到Github

注意点

  1. 每次添加markdown文件以后都要重新生成静态页面
  2. 每次本地操作以后都要重新部署到github
  3. 配置项目的”:”后必须跟一个空格，比方说theme:[空格][模版名]

Github

作为一个程序员，github的使用是必须的，这里并不累赘复述如何注册github账号，如何在github创建仓库等等，只说明创建博客时的注意点。

  • 新建一个仓库后，仓库名必须与GitHub帐户一致，比方说的我的github地址为https://github.com/zhuwo, 那么仓库名必须为zhuwo.github.io。这样，最后你的博客地址也就是https://zhuwo.github.io。
  • 使用Git部署之前，需要安装 hexo-deployer-git，命令如下：
$ npm install hexo-deployer-git --save
  • 本地部署到github以后，再在仓库的设置页面，将分支改为master（仓库没有数据的时候不能选择分支，也就没有github page）

最后，在仓库的设置页面可以看到github page的地址，也就是你的博客地址。

欢迎大家访问我的博客Geek: https://zhuwo.github.io
[//]:<说明> (网易云音乐外链)

Tips

  1. 网易云音乐生成外链，代码直接拷贝Markdown文件中

博客推荐

  1. https://notes.wanghao.work/
  2. http://www.dingxuewen.com/
  3. https://unindented.org

​
​

#技术 #博客 #Hexo