使用github作为个人博客

大概流程:

  1. 搭建 Node.js 环境
  2. 搭建 Git 环境
  3. GitHub 注册和配置
  4. 安装配置 Hexo
  5. 关联 Hexo 与 GitHub Pages
  6. GitHub Pages 地址解析到个人域名
  7. Hexo 的常用操作
  8. 结束语


先决条件

安装Node.js,Git

确认安装是否成功:

  • Node:
    1
    2
    node -v
    npm -v
  • Git:
    1
    git --version
    我的版本:
1
2
3
4
5
6
7
8
$ node -v
v10.13.0

$ npm -v
6.4.1

$ git --version
git version 2.19.1.windows.1

出现版本号,说明安装成功。

下载后需要注册Github账号,并创建新的存储库(yourname.github.io),yourname是你的github用户名
访问你的Github主页:<yourname>.github.io,正常访问,说明成功。

你可以使用淘宝NPM定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后一切准备就绪后,安装hexo框架

1
cnpm install -g hexo-cli

查看hexo版本

1
hexo version

输出版本,说明成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ hexo version
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

可以看到在
选择放置博客本地管理的位置,进入那个目录后,右击打开 Git Bash Here选项

1
2
3
hexo init <你的github主站域名,like this: hexo init <username>.github.io>
cd <username>.github.io
cnpm install

生成的目录大概是这样的:

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

生成SSH key以让hexo访问github,

1
ssh-keygen -t rsa -b 4096 -C "your_email@qq.com"

打开文件C:\Users\bxm09.ssh\id_rsa.pub,并复制文件里面的内容
进入https://github.com/settings/ssh,选择 new ssh key,粘贴刚刚复制的文件C:\Users\bxm09.ssh\id_rsa.pub全部内容。测试:

1
ssh -T git@github.com

输出:

1
2
3
The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

然后输入yes。
输出:

1
Hi <your_username>! You've successfully authenticated, but GitHub does not provide shell access.

开始关联hexo和GitHub

1
2
git config --global user.name "your_username"
git config --global user.email "your_emial@qq.com"

修改git的remote url

1
2
3
$ git remote -v
origin https://github.com/xxxxxxx (fetch)
origin https://github.com/xxxxxxx (push)

如果是以上的结果那么说明此项目是使用https协议进行访问的(如果地址是git开头则表示是git协议)

复制此ssh链接,然后使用命令 git remote set-url 来调整你的url

1
git remote set-url origin git@github.com:xxxxxxxx

然后你可以再用命令 git remote -v 查看一下,url是否已经变成了ssh地址。

然后你就可以愉快的使用git fetch, git pull , git push,再也不用输入烦人的密码了

Hexo命令

网络上有很多部署到git的教程,自行参考。执行命令hexo generate后会在目录下生产public文件夹,该文件夹是hexo生产的静态文件。可以部署发布到自己建的web服务器。以下列一些常用命令:

hexo new "postName"      #新建文章

hexo new page "pageName" #新建页面

hexo generate            #生成静态页面至public目录

hexo server              #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy              #将.deploy目录部署到GitHub

hexo help                #查看帮助

hexo version            #查看Hexo的版本

以下是命令的简写:

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

生成,部署也可以这样写:

hexo d -g

启动hexo本地服务(!!!若遇到问题,下面有常见问题解决方案)

1
hexo server

你的网站会在http://localhost:4000/上启动

成功启动后。
打开博客全局配置文件站点配置文件 _config.yml。

找到Deployment字段,(!!!每个冒号后都有一个空格)

1
2
3
4
5
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:<your_username>/<your_username>.github.io.git
branch: master

删除旧的 public 文件

1
hexo clean

生成新的 public 文件

1
2
3
hexo generate
#or
hexo g

开始部署

1
2
3
hexo deploye
#or
hexo d

浏览器打开你的https://<your_username>.github.io

安装Next主题

1
2
cd  <your_username>.github.io
git clone https://github.com/theme-next/hexo-theme-next themes/next

启用 NexT 主题

打开博客站点配置文件 _config.yml。找到 theme 字段,并将其值更改为 next。

1
theme: next

验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 –debug),整个命令是 hexo s –debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

绑定自己的域名

在 GitHub 仓库的根目录下建立一个 CNAME 的文本文件(注意:没有扩展名),文件里面只能输入一个你的域名,不能加http://

1
你申请的域名地址
注意:CNAME 一定是在你 Github 项目的 master 根目录下 进入[阿里云域名解析地址](https://dc.aliyun.com/tcparse/dns.htm)添加解析(2 records):

Frist:
记录类型选择CNAME
主机记录填@
解析线路选择默认
记录值填www. # eg: www.mardan.wiki
TTL值为10分钟

Second:
记录类型选择CNAME
主机记录填www
解析线路选择默认
记录值填<yourname>.github.io
TTL值为10分钟

点击保存,等 1 分钟,访问下你自己的域名,一切就ok了。
域名绑定成功,域名解析成功,因此你在浏览中输入你的域名

注意:CNAME文件在下次 hexo deploy的时候就消失了,需要重新创建,这样就很繁琐

所以修改**站点配置文件** _config.yml。在skip_render:下添加文件名,你要放置的CNAME文件位置在<yourname>.github.io/source目录下。
1
2
3
skip_render:
- README.md
- CNAME

如果在博客文章列表中,不想全文显示,可以增加 <!-- more -->, 后面的内容就不会显示在列表。

未完待续......
主题优化

常见问题解决方案

如果:hexo deploye,报not found:git

1
cnpm install hexo-deployer-git --save
------ 文章已经结束,谢谢你的阅读 ------
------ article has ended,thank you for reading ------