使用Hexo + Next搭建静态博客

144
作者 Jovey
2015.09.21 22:29* 字数 1126

欢迎移步我的博客阅读:《使用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


Theme-Next
  • NexT is built for easily use with elegant appearance. First things first, always keep things simple
  • NexT 主旨在于简洁优雅且易于使用,所以首先要尽量确保 NexT 的简洁易用性。

这是一个扩展主题,由iissnan开发,精于心,简于形的理念。

正题

上面是对搭建博客的一些技术了解,接下来进入正题。

Hexo初始化博客框架

  1. 安装Hexo
    Hexo安装和搭建依赖NodejsGit,可自行下载。
    $ 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. 更多
  8. 官网[Hexo]
  9. 配置相关[Hexo | 配置]
  10. 更多的命令[Hexo | 指令]

那么到此为止网站的雏形算是完成了,接下来你就要自己去管理和完善个人网站了。

使用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. 更多
  5. Next官网[Next]
  6. 主题设定[Next | 主题设定]
  7. 第三方服务[Next | 第三方服务]

启用Next主题成功,那么你的网站变得酷炫。(简约)

最后

我的博客
Next官方实例

有任何疑问和建议可以留言,将在第一时间为你解答

开发日常