使用 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官方实例

有任何疑问和建议能够留言，将在第一时间为你解答