使用 Hexo + Next 搭建靜態博客

歡迎移步個人博客閱讀：《使用 Hexo + Next 搭建靜態博客》

前言

Github 爲廣大開發者提供了一個很是好的平臺，不只是代碼的開源，同時Github還提供了開發者能夠在 Github 上創建本身的站點（GithubPage）的一個很是有意思的功能。這個功能的侷限是隻能建立靜態的網站，那麼咱們可使用一些工具來快速建立這一網站。

本文旨在幫助剛接觸 Github 新手，想利用 Github 來建立本身的站點、我的博客等。大神能夠忽視__(:з」∠)__。

準備

你須要在 Github 上建立一個屬於本身的帳戶，而後新建一個倉庫（new repository），並命名爲 YourSiteName.github.io/com，此時 Github 會幫助你初始化一個靜態網頁，你能夠根據本身的喜愛選擇一些模版（這都不是重點），接着嘗試訪問下你所建的站點，成功後就能夠開始動工了。

關於 Hexo

• A fast, simple & powerful blog framework

• 快速，簡單而高效的靜態博客框架

  • 超快速度： Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。

  • 支持 Markdown： Hexo 支持 GitHub Flavored Markdown 的全部功能，甚至能夠整合 Octopress 的大多數插件。

  • 一鍵部署： 只需一條指令便可部署到 GitHub Pages, Heroku 或其餘網站。

  • 豐富的插件： Hexo 擁有強大的插件系統，安裝插件可讓 Hexo 支持 Jade, CoffeeScript。

關於 NexT

• NexT is built for easily use with elegant appearance. First things first, always keep things simple

• NexT 主旨在於簡潔優雅且易於使用，因此首先要儘可能確保 NexT 的簡潔易用性。

這是一個擴展主題，由 iissnan開發，精於心，簡於形的理念。

正題

上面是對搭建博客的一些技術瞭解，接下來進入正題。

Hexo 初始化博客框架

1. 安裝 Hexo

Hexo 安裝和搭建依賴 Nodejs 和 Git，可自行下載。

$ npm install -g hexo-cli

2. 初始化框架

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

初始化完成大概的目錄：

.
├── _config.yml //網站的 配置 信息，您能夠在此配置大部分的參數。
├── package.json
├── scaffolds     //模版 文件夾。當您新建文章時，Hexo 會根據 scaffold 來創建文件。
├── source     //資源文件夾是存放用戶資源的地方。
|   ├── _drafts
|   └── _posts
└── themes     //主題 文件夾。Hexo 會根據主題來生成靜態頁面。

3. 新建文章（建立一個Hello World）

$ hexo new "Hello World"

在 /source/_post 裏添加 hello-world.md 文件，以後新建的文章都將存放在此目錄下。

4. 生成網站

$ hexo generate

此時會將 /source 的 .md 文件生成到 /public 中，造成網站的靜態文件。

5. 服務器

$ hexo server -p 3000

輸入 http://localhost:3000 便可查看網站。

6. 部署網站

$ hexo deploy

部署網站以前須要生成靜態文件，便可以用 $ hexo generate -d 直接生成並部署。此時須要在 _config.yml 中配置你所要部署的站點：

## Docs: http://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: git@github.com:YourRepository.git
     branch: master

7. 更多

• [[Hexo官網]](https://hexo.io/zh-cn/)

• 配置相關 - [[Hexo | 配置]](https://hexo.io/zh-cn/docs/co...

• 更多的命令 - [[Hexo | 指令]](https://hexo.io/zh-cn/docs/co...

那麼到此爲止網站的雛形算是完成了，接下來你就要本身去管理和完善我的網站了。

使用 NexT 主題讓站點更酷炫

1. 使用

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

從 NexT 的 Gihub 倉庫中獲取最新版本。

2. 啓用

須要修改 /root/_config.yml 配置項 theme：

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

3. 驗證是否啓用

$ hexo s --debug

訪問 http://localhost:4000，確保站點正確運行。（此命令能夠作平時預覽用）

4. 更多

• NexT官網 - [[NexT]](http://theme-next.iissnan.com/)

• 主題設定 - [[Next | 主題設定]](http://theme-next.iissnan.com...

• 第三方服務 - [[Next | 第三方服務]](http://theme-next.iissnan.com...

啓用 Next 主題成功，那麼你的網站變得酷炫（簡約）。

最後

個人博客
Next官方實例

有任何疑問和建議能夠留言，將在第一時間爲你解答