歡迎移步我的博客閱讀：《使用 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.htmldeploy:type: gitrepo: git@github.com:YourRepository.gitbranch: 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官方實例

有任何疑問和建議可以留言，將在第一時間為你解答

總結

以上是生活随笔為你收集整理的使用 Hexo + Next 搭建静态博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。