GitHub Pages 搭建博客

2,016 阅读2分钟

原文链接

简介

如果只是搭建简单的个人博客,Github Pages 绝对是值得尝试的方案,它提供了静态网站代码的托管服务。

HexoJekyll 这类静态博客生成工具,可以生成静态代码。

借助以上工具,作者只需要专注于写作,其他工作由它们完成。

笔者采用了 Hexo,结合 NexT 主题搭建了此博客。

GitHub 配置

新建 repository,名称为 username.github.io,这也是最终的博客网址,其中 username 必须为 GitHub 上的用户名。

如果已有静态网站代码,可以 clone repository 后,将代码复制到相应目录下,再 push 到 GitHub 上。

# 克隆 repository 来本地
git clone https://github.com/<username>/<username>.github.io

Hexo

安装 Hexo

安装前需要确保已安装 Git 和 Node.js Mac 自带 Git,直接跳过,笔者使用 Homebrew 安装 Node:

# 安装 Node
brew install node

# 安装 hexo 成功会有以下提示
npm install -g hexo-cli

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

> fsevents@1.2.4 install /usr/local/lib/node_modules/hexo-cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-cli@1.1.0
added 171 packages from 369 contributors in 29.855s

新建项目

# folder 为项目目录名
hexo init <folder> 
cd <folder>
npm install

调用 hexo serverhexo s --debug(调试模式) 后,可以通过 http://localhost:4000/ 访问本地博客。

NexT 主题

安装前,需要创建 Hexo 项目,然后复制 NexT 到项目目录下:

cd <hexo site folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改 _config.yml 中的 theme 字段,将其值改为 next。 这样,NexT 主题安装完成。接下来验证主题是否正确启用。 注意:切换主题后,最好使用 hexo clean 来清除缓存。

hexo clean
# 调试模式启动 Hexo 本地站点,会显示异常信息
hexo -s --debug
# 显示以下信息,即为正常
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

NexT 相关配置在 themes/next/_config.yml 中。

有多种 Scheme,可根据个人喜欢修改:

# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

其他详细设置请参考 开始使用 NexT

写作

通过 hexo new 来新建一篇文章:

hexo new [layout] <title> # <title> 不需要后缀名
# 如  hexo new GitHub_Pages_搭建博客

可指定文章的布局(layout),默认为 post,通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

详细参考 Hexo 写作

写完后,生成静态文件

hexo generate

部署

生成的静态文件在 public 目录下,可以复制到任何地方。 也可以通过 配置,自动部署到常见平台。

自动部署到 GitHub Pages

安装 hexo-deployer-git

npm install hexo-deployer-git --save

修改配置

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

一键部署

hexo deploy

参考资料

Github Pages

开始使用 NexT