Github Pages+Hexo从零开始的免费建站教程

Github Pages和Hexo简介

Github Pages 其实就是 Github 提供的博客服务。你可以理解为github免费提供给你的服务器，而Hexo就是你可以快速发表博客的工具。

  • 有过建站经验的小伙伴应该都清楚，如果自己想搭建一个属于自己的网站，首先得有一个服务器给你保存数据，购买了服务器之后，服务提供商会给你提供一个服务器的ip地址，此时你只能通过ip地址对你的服务器进行访问，如果你想通过类似于baidu.com的域名形式对自己的服务器进行访问，你还需要购买一个域名地址，而Github Pages免费给你提供了服务器和域名两项服务。
  • 服务器和域名都搭建好后，如果不是刻意想从零实现网站的每个页面，大部分人都会选择使用别人造好的轮子，类似于WordPress的框架，而Hexo就是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

好了，简单的介绍完了，接下来开始正式建站。

使用Github Pages

注册 Github 账号， 进入注册，然后在 Github 中创建一个以 .github.io 结尾的 Repository。
image

  1. Repository name: 你的github用户名.github.io
  2. 勾选 Initialize this repository with a README
  3. 点击Create repository
    image

系统环境配置

在安装Hexo前，你的系统需要支持Nodejs以及Git，如果还没有，那就立刻开始安装吧！

下载安装Node.js

安装Node.js教程

下载前往Node.js

下载安装Git

下载地址：http://git-scm.com/download/

下载成功后，打开程序然后按默认选项安装即可。
git相关教程

生成SSH密钥

git安装成功后，在桌面右键，点击git bash here，此时会打开一个类似于cmd命令行一样的窗口，此时我们要在本地创建ssh key，(这个key相当于通行证)，命令行输入

1
ssh-keygen -t rsa -C "你的邮箱地址"

“你的邮箱地址”改为你在github上注册的邮箱，之后会要求确认路径和输入密码，我们这使用默认的一路回车就行。

成功的话会在C:\Users\Administrator文件夹里生成.ssh文件夹，得到两个文件id_rsa和id_rsa.pub。打开id_rsa.pub，复制里面的key。

在GitHub上添加SSH密钥

回到github上，进入 Account Settings（账户配置），https://github.com/settings/keys，点击右上角New SSH Key，title随便填，粘贴在你电脑上生成的key。

好了，此时你的电脑和github账号的通道就建立好了，你可以提交本地数据到github上了。

使用Hexo

安装hexo

命令行输入

1
npm install -g hexo-cli

回车，等待系统安装，安装完成后

继续输入

1
hexo -v

如果能看到版本号说明安装成功。

初始化hexo

在D盘新建一个blog文件夹，在此文件夹内右键，git bash here，依次输入下面的命令，每输入一行按一次回车

1
2
3
4
hexo init  //将 blog 文件夹初始化成一个博客文件夹
npm install  //安装依赖包
hexo g  //生成网页
hexo s  //将生成的网页放在本地服务器，默认端口是4000

在浏览器输入http://localhost:4000/，回车就可以看到效果了。

如果想关闭服务器，按Ctrl+C可以退出，关闭命令行窗口也可以退出。

发布博文

如果你刚才没有关闭命令行窗口，继续输入命令

1
hexo new "文章标题，可以自定义"   //新建一篇文章

此时在你的D:\blog\source\_posts文件夹内，会看到一个”文章标题，可以自定义.md”文件。

1
2
3
4
5
6
title: 文章标题，可以自定义
date: 2018-06-30 09:00:00 #发表日期，一般不改动
categories: hexo #文章分类
tags: [hexo,github] #文章标签，多项时使用这种格式
---
正文，使用Markdown语法书写

使用文本编辑器打开(建议使用支持markdown语法的编辑器)，就可以使用markdown语法进行文章的书写了，如果不懂markdown语法，请点击这里学习

保存之后退出，使用命令

1
2
hexo g   //生成网页
hexo s

再次前往 http://localhost:4000/ 查看，此时可以发现刚才新建的文章成功添加了。

将本地Hexo博客部署到Github上

打开d/blog/_config.yml文件

找到#Deployment，修改为

1
2
3
4
deploy:
	  type: git
	  repository: 你创建的博客项目的github地址.git
	  branch: master

注意，这里有几个坑

  • 配置文件名“:”后要加一个空格，否则会报错;
    image
  • repository这里最好使用项目的git地址，比如我的就是git@github.com:Sanakey/Sanakey.github.io.git，你可以在自己的github项目里点击图中的按钮复制该地址
    image

保存后退出，安装 hexo-deployer-git，输入命令

1
2
npm install hexo-deployer-git --save
hexo g -d  //生成网页并部署

看到返回INFO Deploy done: git，说明部署成功

在浏览器输入你的github用户名.github.io，查看自己的博客网站吧!

关于主题等高级技巧，我们下次再聊~~！

附录

hexo常用命令

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页，可以在 public 目录查看整个网站的文件
hexo server #本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，**强烈建议每次执行部署命令前先使用该命令清理缓存**

简写

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

全局配置 _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述，给搜索引擎看的
author:  #作者
email:  #你的电子邮箱
language: zh-CN #语言，这里使用中文就行
# URL #链接格式
url:  #博客网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
titlecase: false #标题转换成大写
external_link: true #是否在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署
deploy:
  type: git
  repository: 你创建的博客项目的github地址.git
  branch: master

关于Hexo

想了解更多关于Hexo的内容，请点击查看
官方中文文档

本文标题:Github Pages+Hexo从零开始的免费建站教程

文章作者:Sanakey

发布时间:2018-06-26, 14:00:08

最后更新:2018-07-23, 23:07:49

原始链接:https://sanakey.github.io/2018/06/26/Github-Pages-Hexo从零开始的免费建站教程/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


感谢打赏，错误之处欢迎指正交流(`・ω・´) !~~



文章目录
  1. 1. Github Pages和Hexo简介
  2. 2. 使用Github Pages
    1. 2.1. 系统环境配置
    2. 2.2. 下载安装Node.js
    3. 2.3. 下载安装Git
    4. 2.4. 生成SSH密钥
    5. 2.5. 在GitHub上添加SSH密钥
  3. 3. 使用Hexo
    1. 3.1. 安装hexo
    2. 3.2. 初始化hexo
    3. 3.3. 发布博文
    4. 3.4. 将本地Hexo博客部署到Github上
  4. 4. 附录
    1. 4.1. hexo常用命令
    2. 4.2. 简写
    3. 4.3. 全局配置 _config.yml
  5. 5. 关于Hexo
|