Hexo + Github Pages 搭建个人博客

一、什么是Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

二、准备工作

你需要:
1、NodeJS环境,请参考 NodeJs官网
2、Git,请参考 廖雪峰的Git教程
3、一个Github账号

三、安装Hexo

检验NodeJs安装:

$ node -v

若安装成功会显示NodeJs版本号,例如:

$ v9.6.1

接着,在命令行中输入:

$ npm install -g hexo-cli

由于国外网络延迟的关系,下载速度太慢或者某些依赖安装失败,请安装淘宝NPM镜像,设置镜像的方法和使用规则详见:https://npm.taobao.org。
至此,若无意外情况,Hexo安装完毕,若有疑问请参考 Hexo官方手册

四、Github Pages使用

  1. 登录Github,在右上角选择New repository,新建一个repository,并且命名为username.github.io,注意把username替换成你申请账号的用户名,其余不要变。
  2. 使用 git clone https://github.com/MeetMax/meetmax.github.io.git 命令将项目克隆到本地,这里以我自己的项目为例。
  3. 进入文件夹 cd meetmax.github.io
  4. 新建 index.html 文件,在里面输入



    hello world


hello world


  1. 将文件提交到 Github 仓库,在meetmax.github.io文件夹运行命令:
$ git add .
$ git commit -m "hello"
$ git push origin master

6.在浏览器打开 https://meetmax.github.io/,若显示hello world则说明配置成功,注意将meetmax替换成自己的账号。

五、搭建Hexo博客

1. 初始化博客目录

$ hexo init meetmax.github.io
$ cd meetmax.github.io
$ npm install

2. 生成静态页面

$ hexo clean // 清空代码,初始化
$ hexo g // g表示generate,生成静态页面

3. 运行项目

$ hexo s // s 表示 server

然后打开浏览器输入:http://localhost:4000/查看

4. 发布文章

$ hexo new test

这时候会在source/_post文件夹生成test.md文件,或者直接手动在source/_post文件夹下新建test.md文件。再次运行命令:

$ hexo clean
$ hexo g 
$ hexo s

5. 配置

网站的配置大部分都在_config.yml文件中:

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 作者名字
  • language -> 网站使用语言

6. 需要注意的坑

配置文件名字冒号后面必须加空格,例如 title: meetmax,否则配置不生效。

7. 更换主题

我用的是Yilia主题,这里就以该主题为例

  1. 克隆主题到 theme 文件夹
$ cd themes
$ git clone https://github.com/litten/hexo-theme-yilia.git
  1. 配置主题
    修改项目文件夹下的_config.yml文件,配置如下: 注意加空格,否则无效
theme: hexo-theme-yilia

六、部署到Github

1. 安装 hexo-deployer-git

$ npm install hexo-deployer-git --save

若出现下面的错误,请设置public key,若不懂请使用搜索引擎

Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

2. 在_config.yml中配置 Git,以我自己的为例:

这里要注意 repossh地址,非 https

deploy:
  type: git
  repo: [email protected]:MeetMax/meetmax.github.io.git
  branch: master

3. 部署到Github

$ hexo d // d表示deloy

4.访问

打开浏览器访问:https://meetmax.github.io/

参考

手把手教你使用Hexo + Github Pages搭建个人独立博客
Hexo 博客搭建指南

你可能感兴趣的:(Hexo + Github Pages 搭建个人博客)