hexo搭建github个人博客简明教程

从零开始搭建github个人博客,基于window系统(linux同理),适合大众。
整体上,在Github Pages的基础上使用hexo框架来搭建博客,代码存本地,上传github,方便迁移。

搭建好后,使用Markdown来书写博客,如果不懂Markdown,没关系,很好入门。

安装git

git官网下载对应的版本,点击安装就好。

安装完成后,在cmd上输入 git version 查看是否安装成功,成功会输出对应的git版本。

之后使用的时候,只需要在需要操作的文件目录下点击鼠标右键,菜单栏中就会出现Git GUI hereGit Bash Here,一般我们选择 Git Bash Here来进行命令行操作。 后续的命令行操作都是在 Git Bash中进行了,防止出错。

安装node.js

node官网 下载对应的版本,win最好选64位的msi, 双击安装就OK了。

创建Github仓库

  1. 首先需要一个github账号,邮箱注册并验证;
  2. 创建Repositories,登入个人账户后,有个绿色的new repository按钮,点击创建创库,或者输入:https://github.com/new
    注意: 创建的仓库名为:你的github用户名.github.io,比如我的zekizz.github.io
  3. 仓库创建成功不会立即生效,需要过一段时间,创建成功后默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。

配置SSH key

配置的目的是方便提交代码,否则每次都需要输入用户名和密码很麻烦。

首先在任意位置右键打开Git Bash, 输入

cd ~/.ssh #检查本机是否已存在的ssh密钥

如果提示:No such file or directory,说明是第一次使用git,如果是,生成key

ssh-keygen -t rsa -C "你的github注册邮件地址"

一路回车,最终会在 C:\Users\你的用户名\文件夹下生成密钥文件。

用文本编辑器(或记事本)打开.ssh\id_rsa.pub, 复制里面的内容

打开你的github主页,进入 setting -> SSH and GPG keys -> New SSH key

将刚才复制的内容粘贴到Key中,title随便填,保存。

测试是否成功

ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到
Hi XXX! You've successfully authenticated, but GitHub does not provide shell access.

说明SSH配置成功

最后配置git用户信息

git config --global user.name "username"// 你的github用户名,非昵称

git config --global user.email  "email"// 填写你的github注册邮箱

安装hexo

安装只需要一条命令,在git bash中输入

npm install -g hexo

下一步是创建博客项目和初始化

首先,在你喜欢的地方创建一个文件夹,用于存放博客项目代码,比如 E:\git_code\blog\Hexo,路径上最好不要有中文吧

然后在该目录下,右键打开git bash, 输入

hexo init

hexo会自动下载一些文件到这个目录,我们首先不管内容

继续在git bash中输入

hexo g # 生成

hexo s # 启动服务

hexo s是开启本地预览服务,于是可以打开浏览器,访问 http://localhost:4000,预览生成的博客。

然后…

你就会看到一个巨丑的博客页面!!!

这个页面是hexo默认生成的,主题很丑,所以我们需要修改主题。

Hexo提供了一系列主题,进入主题专栏,挑选主题。

挑好主题后,进入主题的github页,需要克隆主题项目,比如主题Anisina

进入Hexo文件夹下的themes目录,右键打开git bash,输入

git clone https://github.com/Haojen/hexo-theme-Anisina.git(此处地址替换成你需要使用的主题的地址) 

注意!!!
这里clone项目后,需要修改下文件夹的名字,比如目前的文件夹为hexo-theme-Anisina,需要修改为Anisina,因为主题名为Anisina,防止之后设置主题的时候出错或无效。

然后修改hexo目录下的_config.yml,将theme: landscape修改为theme: Anisina,然后重新hexo g来生成新的文件。

如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。

其次,按照主题的github Readme来设置主题的一部分参数,这里暂不做描述,自行按照喜好配置,配置的文件为themes目录下,主题文件夹下的_config.yml
需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。

这里唯一需要注意的是关于留言页的设置,我倾向于配置为gitalk或者gitment,这个要看主题是否支持,这里放在之后叙述。

上传github

首先配置hexo目录下的_config.yml
修改deploy部分

deploy:
  type: git
  repository: git@github.com:zekizz/zekizz.github.io.git
  branch: master

这里替换成你自己的,在clone or download那里

其次,安装一个插件

npm install hexo-deployer-git --save

如果前面都OK了,在hexo目录下,打开git bash,然后输入

hexo d

就OK了。

一般上传可以采用组合键

hexo d -g #生成并上传

这里给出常用hexo命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

对应的简写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

写新博客并上传

首先定位到hexo根目录,打开git bash

hexo new 'my-first-blog' # 替换为你的取得博客文件名

然后就会在source\_posts文件夹下生成my-first-blog.md文件,打开该文件进行书写。

这里书写采用的是markdown,不熟的,这里给出两个教程
认识与入门 Markdown
怎样引导新手使用 Markdown?

书写markdown的工具
win: MarkdownPad
mac: Mou(目前最新mac版本好像不支持)、MacDown

写完后,组合键

hexo d -g #生成并上传

完成上传,或者

hexo clean
hexo g
hexo g
hexo d

博客内容

最前面的页面设置,举一个栗子

---
title: your title
date: 2018-09-17 22:50:10
tags:
- machine learning
- blog 
mathjax2: true
categories: ML
---

line 1 xxx
line 2 xxx

<!--more-->

line 3 xxx

这里<!--more-->是分割摘要的,line 1 xxxline 2 xxx将作为摘要显示在主页中。

配置留言功能

我使用的主题是maupassant,主题中已经支持了多种留言方式,只需要对应配置而已,这里推荐使用gitalk。
如果主题未支持,参考:

如果像主题maupassant这样已经提供了如下的gitalk功能支持,只需要简单配置一下。如果gitalk功能自己已配置好,后续的配置也同理

disqus: ## Your disqus_shortname, e.g. username
uyan: ## Your uyan_id. e.g. 1234567
livere: ## Your livere data-uid, e.g. MTAyMC8zMDAxOC78NTgz
changyan: ## Your changyan appid, e.g. cyrALsXc8
changyan_conf: ## Your changyan conf, e.g. prod_d8a508c2825ab57eeb43e7c69bba0e8b
gitment:
  enable: false ## If you want to use Gitment comment system please set the value to true.
  owner: ## Your GitHub ID, e.g. username
  repo: ## The repository to store your comments, make sure you're the repo's owner, e.g. imsun.github.io
  client_id: ## GitHub client ID, e.g. 75752dafe7907a897619
  client_secret: ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
gitalk:
  enable: false ## If you want to use Gitment comment system please set the value to true.
  owner:  ## Your GitHub ID, e.g. username
  repo:  ## The repository to store your comments, make sure you're the repo's owner, e.g. gitalk.github.io
  client_id:  ## GitHub client ID, e.g. 75752dafe7907a897619
  client_secret:  ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
  admin:  ## Github repo owner and collaborators, only these guys can initialize github issues.
valine: ## https://valine.js.org
  enable: false ## If you want to use Valine comment system, please set the value to true.
  appid: ## Your LeanCloud application App ID, e.g. pRBBL2JR4N7kLEGojrF0MsSs-gzGzoHsz
  appkey: ## Your LeanCloud application App Key, e.g. tjczHpDfhjYDSYddzymYK1JJ
  notify: false ## Mail notifier, see https://github.com/xCss/Valine/wiki/Valine-评论系统中的邮件提醒设置
  verify: false ## Validation code.
  placeholder: Just so so ## Comment box placeholders.
  avatar: 'mm' ## Gravatar type, see https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  pageSize: 10 ## Number of comments per page.
  guest_info: nick,mail,link ## Attributes of reviewers.

首先创建新应用OAuth application和Personal access tokens,具体位置在
Settings -> Developer settings

  1. 点击new OAuth Apps创建新应用
    参数说明
  2. 注册成功后,就会得到Client IDClient Secret,这个填到上文所示的配置中
  3. 一般以上配置好后,第一次需要手动登陆初始化一下就OK了,如果有的主题配置完后出现gitalk未初始化,参考 自动初始化 Gitalk 和 Gitment 评论,这个时候就需要获取token了。

    注意:这里的配置需要sitemap,hexo默认没有添加sitemap功能,需要添加一下,
    参考 hexo(3)-生成sitemap站点地图

推送到百度和谷歌检索

Hexo博客提交百度和Google收录