0%

使用Github Pages创建个人博客

Hexo为一快速、简洁且高效的博客框架,本文主要记录通过Hexo,借助Github Pages搭建个人博客,并配置主题为NexT的过程。

软件安装

安装Git

安装Node.js

Node.js 下载链接

安装Hexo

1
2
npm install -g hexo-cli
npm install hexo-deployer-git # 安装hexo-deployer-git插件

创建及配置Github账号

创建Github账号

访问Github官网进行注册

创建GitPages

即创建与账号 同名 的Repository,例GitHub帐号是yourid,则新建的Repository名称应为yourid.github.io
创建之后可浏览器访问yourid.github**.io**,如果能够正常访问,则证明GitPages创建成功

配置SSH信息

生成SSH Key

本地生成一个SSH Key

1
ssh-keygen -t rsa -C "Email"                        # Email为GitHub的注册邮箱

根据页面提示输入相关信息,可以连续回车采取默认配置。
最终生成结果如下,*.pub即为公钥文件。

复制公钥内容到Github账户信息中

  • 打开~/.ssh/id_rsa.pub文件,复制里面的内容,如下
  • 打开Github官网,登录后进入到个人设置(点击头像->setting)
  • 点击右侧的SSH Keys,点击Add SSH key
  • 填写title之后,将之前复制的内容粘贴到Key框中
  • 点击Add key提交

测试SSH是否配置成功

1
2
3
4
# 本地执行如下代码
ssh -T git@github.com
Hi yourid! You've successfully authenticated, but GitHub does not provide shell access.
# 如提示以上信息,则证明ssh配置成功

配置Github 账户

1
2
3
4
# 本地执行如下代码
git config --global user.name "Username" # Username为GitHub的注册用户名
git config --global user.email "Email" # Email为GitHub的注册邮箱
git config --list # 查看已设配置(Username,Email)是否正确

Hexo建站

使用Hexo进行本地建站

1
2
3
4
# 本地执行如下代码
cd C:/hexo # 切换到本地目录
hexo init C:/hexo # 进行Hexo初始化
npm install # 安装

如果Hexo安装成功,则在本地Hexo目录下的目录结构如下,详细文件含义见Hexo官方文档

1
2
3
4
5
6
7
8
.
├── _config.yml # 网站配置文件,可在此配置大部分的参数
├── package.json
├── scaffolds # 模板文件存放路径。新增文章时Hexo会根据scaffold创建文件
├── source # 用户资源存放路径
| ├── _drafts
| └── _posts
└── themes # 网站主题存放路径。Hexo会根据主题来生成静态页面

本地启动默认的静态网站。访问地址为:http://localhost:4000/

1
hexo server                         # 本地启动

部署网站

打开本地Hexo目录中的_config.yml文件,找到如下配置并根据注释说明更新

1
2
3
4
5
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git # 在yml文件中,:后面需要要带空格
repo: git@github.com:yourid/yourid.github.io # 其中yourid为GitHub的注册用户名

将网站部署到GitPages

1
2
3
$ cd c:/hexo                                        # 进入网站根目录
$ hexo generate # 编译本地内容并生成静态文件
$ hexo deploy # 部署静态网页文件到GitHub

此时,通过访问 http://yourid.github.io 可以看到默认的Hexo首页

更新Hexo主题为NexT

下载NexT主题

5.1.1版本下载地址
下载后解压文件,重命名为next,拷贝到C:\hexo\themes 目录

修改网站的主题为NexT

打开C:\Hexo下的_config.yml文件,按照如下配置,找到theme字段,将其修改为next

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

本地验证是否可用

1
hexo server --debug

访问本地网站http://localhost:4000/,确认网站主题是否切换为NexT。

提交更新到Github

1
2
3
$ cd c:/hexo                                        # 进入网站根目录
$ hexo generate # 编译本地内容并生成静态文件
$ hexo deploy # 部署静态网页文件到GitHub

Hexo其他操作

发布文章

1
hexo n "postname"                                   # 新增文章

命令执行后,会在Hexo的source_post文件夹下新建一个名为”postname.md”的文件,也可以直接在Hexo的source_post文件夹下新建.md结尾的文件。新增文件后重新进行编译和部署以在GitHub Pages上生效。

1
2
$ hexo generate                                     # 编译本地内容并生成静态文件
$ hexo deploy # 部署静态网页文件到GitHub

标签功能

搜索功能

其他