天天看点

用 GitHub Pages + Hexo 搭建个人专属博客

如果你也渴望拥有一个属于自己的博客,那么你应该花费一些时间好好阅读本教程。

学习最好的方法论 —— 就是去做。

什么是 GitHub Pages?

GitHub Pages 是 GitHub 提供的静态站点托管服务,它可以通过 GitHub 库托管你的个人、组织或项目的站点。

你可以使用 Jekyll Theme Chooser 在线创建和部署 GitHub Pages 站点。如果你更喜欢通过本地创建和部署站点,你也可以使用 GitHub Desktop 或者命令行。

GitHub Pages 是一种静态网页托管服务,因此不支持 PHP, Ruby, or Python 等服务端代码。

本教程使用 Hexo 搭建个人 GitHub Pages,因此如果你想创建和部署组织或项目的网页,部分内容可能会不太适用,需要自行作出调整。

注意:GitHub Pages 站点在互联网上是公开可见的,即便你的托管库是私密的。因此如果在你的网页库中有敏感数据,你可能会想在网页发布前移除它们。

什么是 Hexo?

Hexo 是一个快捷、简洁且高效的博客框架。你可以使用 Markdown 书写博文,弹指一挥间 Hexo 就可以利用其精致的主题生成精美的静态博客网页。

Markdown 是一种标记语言,其语法简洁明了、学习容易,而且功能比纯文本更强大。

准备

  1. 下载、安装与配置 Git
  2. 下载与安装 Node.js
什么是 Git ? Git 是目前世界上最先进的分布式版本控制系统(没有之一)。

下载、安装与配置 Git 的具体方式取决于你当前所使用的操作系统。

基于 Windows 操作系统安装 Git

下载 git for windows 安装程序。由于众所周知的原因,从左侧的链接下载 git for windows 十分缓慢。可以参考页面,收录了存储于百度云的下载地址。

安装完成后,还需要最后一步设置,在命令行输入:

$ git config --global user.name "Your Name"$ git config --global user.email "[email protected]"      

例如,你的名字为 Yunhao Zhu, 邮箱为 [email protected]

$ git config --global user.name "Yunhao Zhu"$ git config --global user.email "[email protected]"      

基于 Mac OS X 操作系统安装 Git

有三种方法:

  • 使用 Homebrew, MacPorts:
brew install git      
  • 直接从 AppStore 安装 Xcode,Xcode 集成了 Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。
  • 或者下载 git for Mac OS X 安装程序。

基于 Linux 操作系统安装 Git

  • Linux (Ubuntu, Debian):
sudo apt-get install git-core.      
  • Linux (Fedora, Red Hat, CentOS):
sudo yum install git-core.      

安装 Node.js

  • 下载 安装程序 安装 Node.js
在Windows上安装时务必选择全部组件,包括勾选 Add to Path

安装完成后,请打开命令提示符 cmd 输入

node -v      

出现 vxx.xx.xx 代表安装成功!

  • 安装 Node.js 的最佳方式是使用 nvm

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh      

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh      

安装完成后,重启终端并执行下列命令即可安装 Node.js

$ nvm install stable      

第三部:安装 Hexo

呼,准备工作终于完成了!让我们马上使用 npm 来安装 Hexo,执行如下命令:

$ npm install -g hexo-cli      

安装 Hexo 完成后,接着执行以下命令:

$ hexo init <folder>
$ cd <folder>
$ npm install      

例如,你安装在c盘hexo文件夹下,则执行:

$ hexo init /c/hexo
$ cd /c/hexo
$ npm install
$ hexo generetor
$ hexo server      

什么是 npm?

npm 是 Node.js 的包管理工具(package manager), 帮助我们管理开发中会用到的各种 Node.js 包,极大的方便了我们的开发。

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source|   ├── _drafts
|   └── _posts
└── themes      

打开浏览器输入http://localhost:4000/

创建 GitHub Pages

  1. 注册 GitHub 账号
  2. 新建一个 repository 库,Repository name 输入 "Your username.github.io"
  3. 点击 Settings 下拉至 -> GitHub Pages -> Page name 必须与刚才的库名保持一致 -> 选择一个喜欢的主题 Publish page -> 在地址栏输入你的博客地址即可看到效果

将本地 Hexo 代码部署至 GitHub

  • 修改本地 Hexo 站点的配置文件 _config.yml,在末尾添加(xxx为你注册的GitHub用户名)
deploy:  type: git
  repository: https://github.com/xxx/xxx.github.io
  branch: master      
  • 利用 npm,上传本地代码,第一次 GitHub 可能会要求你输入用户名和密码
npm install hexo-deployer-git --save
hexo g
hexo d      
$ hexo new "postname"$ hexo g
$ hexo d      

结语