使用Hexo搭建个人博客网站

Step 1. 创建 Github Pages

  • 在github新建一个repo,并命名为username.github.io
  • setting中选择主题
  • 即可使用https://username.github.io访问到主页

Step 2. Hexo 环境搭建

Hexo是基于nodehs的快速、简洁且高效的博客框架。

推荐教程:

  • hexo官方文档: https://hexo.io/docs/index.html 说的非常详细
  • 极客学院:http://wiki.jikexueyuan.com/project/hexo-document/

2.1 安装Node.js

  1. 网站deb.nodesource.com维护了nodejs的各版本安装包的PPA,我们可以从该网站上下载执行导入。

    $ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash 
    
  2. 接下来安装nodejs,安装完成之后npm也自动安装好了。

    $ sudo apt-get install nodejs
    
  3. 安装完成之后我们查看一下$ node -v$ npm -v的版本。

2.2 使用npm安装Hexo

npm是Node.js安装时自带的类库,是目前全球最大的类库之一,通过npm install可以直接安装基于Node.js的所有插件

$ npm install hexo-cli -g 

Step 3. 创建及启动网站

  1. 创建一个网站的目录,此处命名为blog
  2. 通过blog目录创建站点

    $ hexo init blog
    
  3. 进入blog 安装插件支持

    ~/blog$ npm install
    
  4. 启动站点

    ~/blog$ hexo server
    

    或使用–denug开启调试

    ~/blog$ hexo s --debug 
    
  5. 查看站点:
    在浏览器中查看http://localhost:4000/

Step 4. 部署到 Github

4.1 配置Github

~/blog$  vim _config.yml

修改deploy下

# 这里冒号后面一定要有空格
deploy:
    type: git
    repo: https://github.com/username/username.github.io

4.2 部署到Github

  1. 安装部署插件

    ~/blog$ npm install hexo-deployer-git --save
    
  2. 清理项目(optional)

    ~/blog$ hexo clean
    
  3. 部署

    ~/blog$ hexo deploy
    

Step 4. 更改博客主题

  1. 进入( https://hexo.io/themes/ )选择主题,进入相应的repo。
    此处以bootstrap-blog为例。

    ~/blog$ git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog.git themes/bootstrap-blog
    
  2. 根据README中的setup Instructions安装插件

    ~/blog$ npm install hexo-tag-bootstrap --save
    
  3. 修改blog根目录的_config.yml,将theme修改为bootstrap-blog

  4. 更新并查看,先清空缓存hexo clean,然后启动服务器hexo s --debug,在本地浏览器输入localhost:4000/查看效果。

Step 5. 创建文章

$ hexo new "blog"
INFO  Created: ~/blog/source/_posts/blog.md

编辑md

---
title: blog1
date: 2018-03-16 15:28:40
tags: tag1
categories: cat1
---

MY FIRST BLOG!  // 这里是要展示的缩略图
 // 以下是查看全文

清理后启动 本地查看预览

$ hexo s --debug

5.1 创建一个新的标签页

$ hexo new page "github"
INFO  Created: ~/blog/source/github/index.md

修改配置文件 themes/主题名称/_config.yml,增加一个menu中一个页面菜单。


hexo 参考教程: https://www.cgmartin.com/2016/01/03/getting-started-with-hexo-blog/

主题:https://github.com/cgmartin/hexo-theme-bootstrap-blog

你可能感兴趣的:(Hexo,Node.js)