使用github pages搭建个人博客

发表于 更新于 本文字数： 452 阅读时长 ≈ 2 分钟

简单介绍如何使用github pages服务以及hexo搭建一个免费的个人博客

准备

创建仓库

创建一个空的仓库，名字固定格式为“username.github.io”，这个名字也是博客的访问的域名

安装hexo

1
2
3
4
5
6
7
npm install -g hexo-cli           # 安装hexo命令行工具
hexo init blog                    # 创建blog项目

cd blog
git clone https://github.com/theme-next/hexo-theme-next themes/next # 安装next主题，可选

npm install hexo-deployer-git --save # 安装github发布工具

配置

配置hexo

修改_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 基础配置
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Y2k38's Blog
subtitle:
description: y2k38's blog
keywords:
author: y2k38
language: zh-CN
timezone: 

# URL 
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://y2k38.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

...

# 博客主题配置
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 可选，若没有安装next主题，则忽略

...

# github部署配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/Y2k38/y2k38.github.io.git
  branch: master # 注意，分支固定位master

发布github

1
hexo clean && hexo deploy

完成

其他

添加gitalk评论系统

[Deprecated] github要求校验方式改为personal access token，待gitalk作者及theme-next作者更新

新建OAuth application获取id、secret，https://github.com/settings/applications/new

new oauth app

配置next主题 themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk, https://github.com/emn178/js-md5
gitalk:
  enable: true
  github_id: y2k38 # GitHub repo owner
  repo: y2k38.github.io # Repository name to store issues
  client_id: xxxxxxxxxxxxxxxx # GitHub Application Client ID
  client_secret: yyyyyyyyyyyyyyyy # GitHub Application Client Secret
  admin_user: Y2k38 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

参考文档

GitHub Pages
How to use Hexo and deploy to GitHub Pages
Creating a personal access token for the command line