如何拥有个人的Github技术博客

0?wx_fmt=png

题图：87testing.com

前不久用wordpress搭建了一个博客，用起来感觉不是太好用，并且数据库经常会发生异常挂掉，没找到解决方案。

看到有不少人使用的hexo+github方式搭建属于自己的博客，

于是，我也做了一些尝试，将搭建的过程整理出来，希望也能帮到他人。

同时，推荐没有Blog的朋友也尝试自己搭建下，中间可能会遇到一些问题，解决问题的过程很痛苦，但是只要爱折腾，最终都能迎刃而解。

一、环境准备

1、安装git (https://git-scm.com/downloads) 安装目的：用来把本地的hexo内容push到github上。

2、安装node（https://nodejs.org/en/download/）安装目的：用来生成静态页面

3、申请github账号(https://github.com/) ssh keys相关的配置之前介绍过，这里就不过多描述：http://www.87testing.com/2017/07/02/pycharm-e5-85-b3-e8-81-94github/

二、安装hexo

1、创建一个文件夹blog，进入到这个blog目录,安装hexo,执行：sudo npm install -g hexo

如下代表执行成功:

TTZhangdeMacBook-Pro:blog admin$ sudo npm install -g hexo

Password:

npm WARN deprecated [email protected]: This package is no longer maintained

/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo/bin/hexo

> [email protected] install /usr/local/lib/node_modules/hexo/node_modules/dtrace-provider

> node scripts/install.js

> [email protected] install /usr/local/lib/node_modules/hexo/node_modules/fsevents

> node install

[fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] postinstall /usr/local/lib/node_modules/hexo/node_modules/hexo-util

> npm run build:highlight

> [email protected] build:highlight /usr/local/lib/node_modules/hexo/node_modules/hexo-util

> node scripts/build_highlight_alias.js > highlight_alias.json

/usr/local/lib

└─┬ [email protected]

├── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ └── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ └─┬ [email protected]

│ │ ├── [email protected]

│ │ └── [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ └── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ └─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├── [email protected]

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ └─┬ [email protected]

│ │ │ │ │ │ ├── [email protected]

│ │ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ │ └── [email protected]

│ │ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ │ │ └── [email protected]

│ │ │ │ │ │ │ └── [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ └─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └── [email protected]

│ │ │ └─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └─┬ [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ ├── [email protected]

│ │ │ │ │ │ └─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ ├── [email protected]

│ │ │ │ │ │ └─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ ├── [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ └─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ ├─┬ [email protected]

│ │ │ │ │ │ └── [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └─┬ [email protected]

│ │ │ │ │ ├── [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ ├─┬ [email protected]

│ │ │ │ │ └── [email protected]

│ │ │ │ └── [email protected]

│ │ │ └─┬ [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ └── [email protected]

│ │ │ ├─┬ [email protected]

│ │ │ │ ├── [email protected]

│ │ │ │ └── [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ └─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ └── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ └── [email protected]

├─┬ [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ └─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ └── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ └── [email protected]

│ │ └── [email protected]

│ ├─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ └─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├── [email protected]

├─┬ [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├── [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └─┬ [email protected]

│ │ └── [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ └─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ └── [email protected]

├── [email protected]

├─┬ [email protected]

│ └── [email protected]

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ └── [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├── [email protected]

│ └─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ └─┬ [email protected]

│ └── [email protected]

├── [email protected]

├─┬ [email protected]

│ └── [email protected]

├── [email protected]

└─┬ [email protected]

├─┬ [email protected]

│ ├── [email protected]

│ └── [email protected]

├─┬ [email protected]

│ └── [email protected]

└─┬ [email protected]

├── [email protected]

└── [email protected]

2、初始化hexo，执行：hexo init

此时，blog目录就是博客的根目录，已经建立完成了。

3、生成静态页面,执行：hexo g(或者执行：hexo generate)

如下代表执行成功:

TTZhangdeMacBook-Pro:blog admin$ hexo g

INFO Start processing

INFO Files loaded in 408 ms

INFO Generated: index.html

INFO Generated: archives/index.html

INFO Generated: fancybox/blank.gif

INFO Generated: fancybox/jquery.fancybox.css

INFO Generated: fancybox/jquery.fancybox.js

INFO Generated: fancybox/jquery.fancybox.pack.js

INFO Generated: fancybox/fancybox_loading.gif

INFO Generated: fancybox/[email protected]

INFO Generated: fancybox/fancybox_overlay.png

INFO Generated: fancybox/fancybox_sprite.png

INFO Generated: fancybox/[email protected]

INFO Generated: archives/2017/08/index.html

INFO Generated: archives/2017/index.html

INFO Generated: css/fonts/FontAwesome.otf

INFO Generated: js/script.js

INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css

INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js

INFO Generated: fancybox/helpers/jquery.fancybox-media.js

INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css

INFO Generated: css/style.css

INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js

INFO Generated: css/fonts/fontawesome-webfont.eot

INFO Generated: css/fonts/fontawesome-webfont.woff

INFO Generated: fancybox/helpers/fancybox_buttons.png

INFO Generated: css/images/banner.jpg

INFO Generated: css/fonts/fontawesome-webfont.svg

INFO Generated: css/fonts/fontawesome-webfont.ttf

INFO Generated: 2017/08/10/hello-world/index.html

INFO 28 files generated in 1.41 s

4、本地启动hexo,执行：hexo server

如下代表执行成功：

TTZhangdeMacBook-Pro:blog admin$ hexo server

INFO Start processing

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

浏览器输入http://localhost:4000，即可打开hexo博客页面：如图：

0?wx_fmt=png

此时只是完成了本地启动hexo，将本地的blog push到github上还需要本地跟github建立连接，接下来对github进行配置。

三、github配置

1、github上创建代码仓库

建立Repository,仓库名：yourname.github.io

2、然后再本地blog目录的_config.yml配置文件中最后一行增加如下配置：

deploy:

type: git

repo: https://github.com/TTtesting/tttesting.github.io.git

branch: master

冒号后面记得加空格，不然会报错。

3、_congig.yml配置修改保存后，执行如下命令：

npm install hexo-deployer-git --save

如下代表执行成功：

TTZhangdeMacBook-Pro:blog admin$ npm install hexo-deployer-git --save

[email protected] /Users/admin/software/blog

└─┬ [email protected]

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ ├─┬ [email protected]

│ │ ├── [email protected]

│ │ ├─┬ [email protected]

│ │ │ ├── [email protected]

│ │ │ └── [email protected]

│ │ ├── [email protected]

│ │ └─┬ [email protected]

│ │ └── [email protected]

│ ├─┬ [email protected]

│ │ └── [email protected]

│ └── [email protected]

└── [email protected]

4、执行配置命令：

TTZhangdeMacBook-Pro:blog admin$ hexo deploy

INFO Deploying: git

INFO Setting up Git deployment...

Initialized empty Git repository in /Users/admin/software/blog/.deploy_git/.git/

[master (root-commit) d37715b] First commit

1 file changed, 0 insertions(+), 0 deletions(-)

create mode 100644 placeholder

INFO Clearing .deploy_git folder...

INFO Copying files from public folder...

INFO Copying files from extend dirs...

[master 28f7f04] Site updated: 2017-08-10 21:52:38

29 files changed, 5758 insertions(+)

create mode 100644 2017/08/10/hello-world/index.html

create mode 100644 archives/2017/08/index.html

create mode 100644 archives/2017/index.html

create mode 100644 archives/index.html

create mode 100644 css/fonts/FontAwesome.otf

create mode 100644 css/fonts/fontawesome-webfont.eot

create mode 100644 css/fonts/fontawesome-webfont.svg

create mode 100644 css/fonts/fontawesome-webfont.ttf

create mode 100644 css/fonts/fontawesome-webfont.woff

create mode 100644 css/images/banner.jpg

create mode 100644 css/style.css

create mode 100644 fancybox/blank.gif

create mode 100644 fancybox/fancybox_loading.gif

create mode 100644 fancybox/[email protected]

create mode 100644 fancybox/fancybox_overlay.png

create mode 100644 fancybox/fancybox_sprite.png

create mode 100644 fancybox/[email protected]

create mode 100644 fancybox/helpers/fancybox_buttons.png

create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css

create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js

create mode 100644 fancybox/helpers/jquery.fancybox-media.js

create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css

create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js

create mode 100644 fancybox/jquery.fancybox.css

create mode 100644 fancybox/jquery.fancybox.js

create mode 100644 fancybox/jquery.fancybox.pack.js

create mode 100644 index.html

create mode 100644 js/script.js

delete mode 100644 placeholder

To https://github.com/TTtesting/tttesting.github.io.git

* [new branch] HEAD -> master

Branch master set up to track remote branch master from https://github.com/TTtesting/tttesting.github.io.git.

INFO Deploy done: git

此时本地与gitbub仓库已建立连接，浏览器中输入：https://tttesting.github.io，即可打开blog ，如图：

0?wx_fmt=png

四、更新本地修改到github

本地修改后每次部署的步骤，可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

一些常用命令：

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的版本

五、博客首页显示所有文章列表配置

1、请确保node版本大于6.2

2、在博客根目录执行命令：npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

jsonContent:

meta: false

pages: false

posts:

title: true

date: true

path: true

text: false

raw: false

content: false

slug: false

updated: false

comments: false

link: false

permalink: false

excerpt: false

categories: false

tags: true

最后，

给大家呈现出我的博客地址，如果只要借助github，就可使用github域名：https://tttesting.github.io

同时，有服务器的可以部署在自己的服务器上，使用自己申请的域名，欢迎访问我的博客：http://www.87testing.com

请加入测试技术分享圈，开始您的学习之旅吧！

长按二维码一键加入 640?wx_fmt=jpeg

87testing.com

长按识别二维码加入：测试技术分享圈

640?wx_fmt=png

如何拥有个人的Github技术博客

猜你喜欢