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

Author： Sanakey
发布时间：June 26, 2018
1958 views
2 comments
5470 字数
Categories：教程

Github Pages和Hexo简介

Github Pages 其实本身就是 Github 提供的博客服务。你可以理解为github免费提供给你的服务器。

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

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

使用Github Pages

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

系统环境配置

在安装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相当于通行证)，命令行输入

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

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

成功的话会在C:UsersAdministrator文件夹里生成.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

命令行输入

npm install -g hexo-cli

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

继续输入

hexo -v

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

初始化hexo

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

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

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

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

发布博文

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

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

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

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

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

保存之后退出，使用命令

hexo g   //生成网页
hexo s

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

将本地Hexo博客部署到Github上

打开d/blog/_config.yml文件

找到#Deployment，修改为

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

注意，这里有几个坑

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

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

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

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

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

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

附录

hexo常用命令

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

简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

全局配置 _config.yml

# 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 #部署，将 lmintlcx 改成用户名
deploy:
  type: git
  repository: 你创建的博客项目的github地址.git 
  branch: master

关于Hexo

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

版权属于：Sanakey(特殊声明除外)
本文链接：https://keymoe.com/archives/11/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

Last modification：November 3rd, 2019 at 03:57 pm

如果觉得我的文章对你有用，请随意赞赏

2 comments

SanakeyAuthor Google Chrome 83.0.4103.116 Windows 10
July 24th, 2020 at 06:00 pm

图床挂了，没备份，gg

Reply
WhatZ Google Chrome 78.0.3904.116 Windows 10
July 24th, 2020 at 12:17 pm

dalao,图片挂了

Reply

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

Sanakey • 2018 年 06 月 26 日

Github Pages和Hexo简介

Github Pages 其实本身就是 Github 提供的博客服务。你可以理解为github免费提供给你的服务器。

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

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

使用Github Pages

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

系统环境配置

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

下载安装Node.js

安装Node.js教程

下载前往Node.js

下载安装Git

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

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

生成SSH密钥

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

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

成功的话会在C:UsersAdministrator文件夹里生成.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

命令行输入

npm install -g hexo-cli

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

继续输入

hexo -v

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

初始化hexo

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

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

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

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

发布博文

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

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

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

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

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

保存之后退出，使用命令

hexo g   //生成网页
hexo s

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

将本地Hexo博客部署到Github上

打开d/blog/_config.yml文件

找到#Deployment，修改为

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

注意，这里有几个坑

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

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

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

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

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

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

附录

hexo常用命令

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

简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

全局配置 _config.yml

# 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 #部署，将 lmintlcx 改成用户名
deploy:
  type: git
  repository: 你创建的博客项目的github地址.git 
  branch: master

关于Hexo

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

版权属于：Sanakey(特殊声明除外)
本文链接：https://keymoe.com/archives/11/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

Github Pages和Hexo简介

使用Github Pages

系统环境配置

下载安装Node.js

下载安装Git

生成SSH密钥

在GitHub上添加SSH密钥

使用Hexo

安装hexo

初始化hexo

发布博文

将本地Hexo博客部署到Github上

附录

hexo常用命令

简写

全局配置 _config.yml

关于Hexo

2 comments