使用hexo+GitHub搭建网站

使用hexo+GitHub搭建网站

Hexo 是基于 Node.js 的一款静态博客框架,如果想要搭建博客,不想自己写页面的话可以考虑用 Hexo,其中有很多的简洁主题可供选择,同时 Hexo 支持 Markdown 语法,编辑文章更加方便,快捷。

所以,为了防止此方法被丢失,就记录下使用hexo+ GitHub搭建网站的方法。

环境配置

Hexo 文档有对 Hexo 安装及使用的详细介绍,推荐阅读。这里我主要写自己安装的步骤、踩过的坑以及一些优化的方法。

在正式安装 Hexo 之前,我们需要确认电脑中是否已安装下列应用程序:

当然,我们还需要 GitHub 账号,如果没有请注册
注册之后记得一定要前往邮箱确认注册,否则无法使用 GitHub Pages。

安装hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。终端输入如下命令:

1
npm install -g hexo-cli

这里,如果你是使用Mac安装hexo的话,请你在命令前加入sudo,如下:

1
sudo npm install -g hexo-cli

初始化

使用终端cd到一个您指定的目录,执行以下命令(命令中的blog是您将要建立的文件夹的名称):

1
hexo init blog

使用终端cdblog文件夹下,执行以下命令,安装npm:

1
npm install

好了,现在可以试试看是否已经初始化成功,执行如下命令,开启本地 Hexo 服务器:

1
hexo s

此时,浏览器中打开网址(默认是4000端口) http://localhost:4000 ,能看到如下页面:

成功界面

这里如果你启动不成功,应该是端口问题,你把端口设置为其他的即可,更改端口命令如下:

hexo s -p 5000(5000就是你要更改新端口,可以是其他端口)

关联GitHub

创建仓库

  1. 登录您的 GitHub 账号,新建名称为您的用户名.github.io的仓库。假设我的 GitHub 账号的用户名是 xxx,那么我就应该新建名称为 xxx.github.io的仓库。
  2. Description可写可不写,随意。
  3. 勾上Initialize this repository with a README
  4. 点击Create Repository完成创建。

开启GitHub Pages

点击Settings,你将会打开这个库的 Settings 页面,向下拖动,直到看见 GitHub Pages,如图:

修改全局配置文件

找到本地blog文件夹下_config.yml,打开后滑到最后,修改成下边的样子:

1
2
3
4
deploy:
type: git
repository: https://github.com/xxx/xxx.github.io.git
branch: master

你可以参考hexo官方文档

小坑提醒,修改本地所有的配置文件时,注意所有的冒号:后边都要加一个空格,否则执行 Hexo 命令时会报错,一定注意。

您需要将repository后的所有xxx换成你自己的用户名,或者也可以在下图位置获取:

然后,您需要为自己配置身份信息,终端输入yournameyouremail换成您自己的 GitHub 用户名和邮箱):

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

终端cdblog文件夹下执行生成静态页面命令:

1
hexo g

此时若出现如下报错:

1
2
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

尝试执行命令:

1
npm install hexo --save

若无报错,自行忽略此步骤。

然后在当前目录下,终端输入:

1
hexo d

这里如果执行hexo d 报错,无法连接 git 或找不到 git,则执行以下命令:

1
npm install hexo-deployer-git --save

完成安装之后,再次执行hexo ghexo d命令。

常用命令组合

  • 常用指令

    1
    2
    3
    4
    5
    hexo new "postName"        //新建文章
    hexo new page "pageName" //新建页面
    hexo g //生成静态页面至public目录
    hexo server //开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo deploy //将.deploy目录部署到GitHub
  • 常用组合

    1
    2
    3
    hexo clean
    hexo g
    hexo d
    1
    2
    hexo d -g #生成部署
    hexo s -g #生成预览
  • 发布文章

终端cdblog文件夹下,执行如下命令新建文章:

1
hexo new "xxx"

名为xxx.md的文件会建在目录.../blog/source/_posts下。

所有的文章都会以md形式保存在_post文件夹中,只要在_post文件夹中新建md类型的文档,就能在执行hexo g的时候被渲染。新建的文章头需要添加一些信息,如下所示:

1
2
3
4
5
6
---
title: xxx //在此处添加你的标题。
date: 2016-10-07 13:38:49 //在此处输入编辑这篇文章的时间。
tags: xxx //在此处输入这篇文章的标签。
categories: xxx //在此处输入这篇文章的分类。
---

文章编辑完成后,终端cdblog文件夹下,依次执行如下命令来发布:

1
2
hexo g
hexo d

以上就是hexo+GitHub建站教程。

如果你要更换主题,请参考主题提供商或者开发者提供的教程更改相应的_config.yml即可。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×