说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

文章目录

前言
一、Hexo是什么？
二、GitHub Pages是什么？
三、建站准备
- 1.准备Github账号
- 2.准备域名
四、网站搭建
- 1. 安装 Node.js
- 2. 安装 Git
- 3. 检验安装
- 4. 安装 Hexo
- 5. 提交本地 Hexo 文件到 GitHub 仓库
- 6. 访问 username.github.io
五、发表文章及更换主题
- 1. 发表文章
- 2. 更换主题
- 3. 配置说明
六、配置个人域名
- 1. 域名解析
- 2. 添加 CNAME 文件
- 3. 个人域名访问
- 4. 启用HTTPS

前言

在上一篇《 2020 搭建一个属于自己的动态网站（WordPress）》文章中博主给大家演示了怎么搭建基于WordPress一个动态网站，其中有些朋友觉得很复杂但是又想弄一个网站可以放放照片，记录自己学习生活点滴的网站，不想备案也不想购买服务器，那么就可以通过这篇文章来学习和实践怎么搭建一个属于自己的静态网站——欢迎大家访问博主个人静态网站 https://www.cdtaogang.top

在这里插入图片描述

一、Hexo是什么？

Hexo 是一款简单地、轻量地、基于Node.js的一个静态博客框架也可以说是静态博客网站生成器，作者是来自台湾的Tommy Chen。

二、GitHub Pages是什么？

首先你需要知道什么是GitHub，GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。————百度百科

GitHub Pages是一个静态站点托管服务，可直接从GitHub上的存储库获取HTML，CSS和JavaScript文件，还可以选择在构建过程中运行这些文件并发布网站。您可以在GitHub Pages examples集合中查看GitHub Pages网站的示例；您可以将站点托管在GitHub的github.io域或您自己的自定义域上

GitHub Pages会发布您推送到存储库的所有静态文件。您可以创建自己的静态文件，也可以使用静态网站生成器为您构建网站。您还可以在本地或另一台服务器上自定义自己的构建过程。我们建议使用Jekyll，它是静态站点生成器，具有对GitHub Pages的内置支持和简化的构建过程。————更多关于GitHub Pages的介绍

三、建站准备

1.准备Github账号

在博主的《最新GitHub账号注册（详细图解）》文章有详细介绍，这里就不多说了哈

2.准备域名

去阿里云、腾讯云、百度云等服务商购买即可，这里已阿里云进行演示
1. 登录阿里云，点击产品下的域名注册

在这里插入图片描述
2. 输入要注册域名名称，点击查询域名

3. 选择你心意的域名，加入清单购买即可

4. 在控制台-域名服务里面就能看到你购买的域名了

四、网站搭建

参考文献：https://hexo.io/zh-cn/docs/

1. 安装 Node.js

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
计划任务【说明：以下14.17.0版本仅在Windows 8.1上受支持，Windows Server 2012 R2或更高版本，如果是win7的用户点击这里下载12.x版本https://nodejs.org/dist/latest-v12.x/】
傻瓜式安装，及不多说了，直接下一步即可，安装完成如下页面显示

2. 安装 Git

Git
在博主的《最新GitHub新手使用教程(Windows Git从安装到使用)——详细图解》以及《最新GitHub新手使用教程(Linux/Ubuntu Git从安装到使用)——详细图解》两篇文章有详细介绍

3. 检验安装

git
node
npm

git --version
node -v
npm -v

在这里插入图片描述

4. 安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo，安装前先创建命名一个文件夹（如：我的文件夹为：E:\cdtaogang_hexo），网站相关文件将储存在此文件夹下

npm install -g hexo-cli

在这里插入图片描述

安装hexo-deployer-git插件，该插件用于将hexo生成的静态html文件上传部署到Github Page上

npm install --save hexo-deployer-git

在这里插入图片描述

在上一步文件夹里面再新建一个 myblog 文件夹（如：我的文件夹为：E:\cdtaogang_hexo\myblog），进入目录后，右击 Git Bash Here 执行如下命令将会在指定文件夹中新建所需要的文件

hexo init

在这里插入图片描述
生成网站静态文件到默认设置的 public 文件夹

hexo generate

在这里插入图片描述
启动本地服务器，用于预览主题。默认地址： http://localhost:4000/

hexo server

在这里插入图片描述
打开浏览器，输入日志上显示的本地服务地址，即可预览效果

5. 提交本地 Hexo 文件到 GitHub 仓库

提示：有不清楚的可以查看《最新GitHub新手使用教程(Windows Git从安装到使用)——详细图解》这篇文章

登录GitHub，新建仓库，如下所示

在这里插入图片描述
仓库名必须是 username.github.io （用户名.github.io 如博主的即cdtaogang.github.io），如下所示

点击Code，选择 HTTPS 或者 HHS 点击连接右侧的复制按钮

进入你本地的 myblog 文件夹（如：E:\cdtaogang_hexo\myblog），打开该文件夹下的 _config.yml 文件（sublime、notepad++、记事本、各种IDE等打开）

在这里插入图片描述
在 _config.yml（如果有已存在的请删除）添加如下配置

deploy:type: gitrepo: https://github.com/<username>/<project># example, https://github.com/hexojs/hexojs.github.iobranch: gh-pages

在这里插入图片描述
如果不确定或者是想修改branch分支的话，可以在仓库中进行查看或者点击分支进行分支命名修改

修改 _config.yml 配置文件保存后，在myblog目录下执行如下命令生成文件和部署到 github 仓库上

hexo g
hexo d

或

hexo g -d

执行命令后出现如下提示：ERROR Deployer not found: git

在这里插入图片描述
出现如上提示说明， hexo-deployer-git 插件没有安装成功，需要重新安装

npm install hexo-deployer-git --save

在这里插入图片描述
安装完成后，执行 hexo g -d 命令，日志显示连接拒绝，也就是无法连接到 https://github.com/cdtaogang/cdtaogang.github.io.git 地址

解决以上连接拒绝的方法，复制Github仓库SSH地址，替换掉 _config.yml 配置文件中的 repo 键的值即可

在这里插入图片描述

再次执行 hexo g -d 命令，本地的 Hexo 博客文件就会部署到配置的 Github 仓库上了

刷新仓库页面，就能看到上一步提交的hexo文件了

6. 访问 username.github.io

通过 hexo g -d 命令将生成的html文件上传到 yourusername.github.io 仓库上了，那么你的小伙伴们就可以通过 <你的 GitHub 用户名>.github.io 地址来访问你搭建的博客网站了（如我的是：https://cdtaogang.github.io）

在这里插入图片描述

五、发表文章及更换主题

1. 发表文章

执行下列命令来创建一篇新文章或者新的页面（第一种方式）

hexo new [layout] <title>

在这里插入图片描述
直接在 myblog\source_posts 目录下新建MD后缀的文件（第二种方式），下载安装markdownpad可以更方便的编辑文章，包括CSDN写作也是通过makerdown编辑方式进行的，可以在MD文件中添加文章的标题、日期、分类、标签、描述、目录、作者信息等，举例如下

---
title: 软件测试用例设计总结
date: 2021-05-28 23:12:00
categories: 总结
tags:- 测试流程- 用例特性- 用例要素- 用例步骤- 用例方法
thumbnail: https://cdn.jsdelivr.net/xxxx/images/test.png
description: 该篇文章是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！
author:name: cdtaogangavatar: https://cdn.jsdelivr.net/xxxx/images/avatar_4.pngurl: https://xxxxx.github.io/
sidebar: [toc]正文内容
---

在这里插入图片描述
保存 hello-cdtaogang.md 文件后，执行生成和部署命令

hexo g -d

在这里插入图片描述
刷新仓库页面，可以看到上一步生成的新的hexo文件，已经部署到github仓库中了

访问或刷新 http://<你的 GitHub 用户名>.github.io 地址就能看到我们在MarkdownPad中新建的文章了

2. 更换主题

进入 Hexo 官网主题，选择自己心仪的主题，点击进入（如博主点击 Meadow 主题），可以看到主题里面有安装和部署的介绍或文档，很方便

在这里插入图片描述
进入 myblog 文件夹下的 themes 目录（如：E:\cdtaogang_hexo\myblog\themes），如要安装 Meadow 主题，输入如下命令从作者仓库中拉取主题到本地themes目录下

git clone https://github.com/kb1000fx/Meadow

在这里插入图片描述
打开 myblog 目录下的配置文件 _config.yml ，找到关键字 theme，修改参数值为：Meadow （也就是主题文件夹名）
.

回到 myblog 目录，输入如下命令生成文件启动本地服务，查看效果

hexo g
hexo s

在这里插入图片描述

3. 配置说明

在 Hexo 目录下（也就是myblog）有一个名为 _config.yml 的配置文件（E:\cdtaogang_hexo\myblog），同时在下载的主题 Meadow 目录下也有一个名为 _config.yml 的配置文件（E:\cdtaogang_hexo\myblog\themes\Meadow），大家不要搞混淆了，在 Hexo 目录下（myblog）下的 _config.yml 的配置文件是控制站点，比如网站的标题、图标、关键字、作者、语言等；而在 themes 目录下的 _config.yml 的配置文件顾名思义是控制主题的配置、包括文章、样式、显示、链接、图片等，这个博主就不多说了哈，每个主题作者都提供了非常详细的主题配置文档

在这里插入图片描述

六、配置个人域名

1. 域名解析

在购买域名的服务商中（我的是在阿里云购买的），进入域名控制台，点击的域名列表中的域名解析，如下所示

在这里插入图片描述
点击添加记录，在弹出的界面中，有很多记录类型如 A（将域名指向-个IPV4地址）、CNAME（将域名指向另外一个域名）等

之前我们是通过部署到 GitHub Pages 静态服务器上的，GitHub Pages 提供了域名 http://<你的 GitHub 用户名>.github.io （如：http://cdtaogang.github.io/），这显然是一个域名 <你的 GitHub 用户名>.github.io ，即在域名解析的时候记录类型就选择是 CNAME,，主机记录选择 www ，就可以通过 www.cdtaogang.xyz 进行网站访问了，如果只想输入 cdtaogang.xyz 来访问网站，那么再添加一个 @ 主机记录即可（主机记录有 @ 和 www 网站URL加不加 www 都能访问）如下所示

在这里插入图片描述

2. 添加 CNAME 文件

此时在浏览器地址栏输入 www.cdtaogang.xyz 会提示 404 （这里没有 GitHub Pages 站点），因为 GitHub Pages 服务器没有接受我们的解析的域名，需要在本地 Hexo\source 目录下添加一个 CNAME 文件（如我的：E:\cdtaogang_hexo\myblog\source）

在这里插入图片描述

这个 CNAME 文件没有任何后缀，文件内容填写你购买的域名也就是上面解析的域名，填写方式有两种（如我的 www.cdtaogang.xyz 或者是 cdtaogang.xyz）

两者的区别是

如填写的是 www.cdtaogang.xyz 无论浏览器输入的是 www.cdtaogang.xyz 或者是 cdtaogang.xyz 都会自动跳转到 www.cdtaogang.xyz
如填写的是 cdtaogang.xyz 无论浏览器输入的是 www.cdtaogang.xyz 或者是 cdtaogang.xyz 都会自动跳转到 cdtaogang.xyz

简而言之就是 CNAME 文件填写内容是哪种最终浏览器就会自动跳转到哪种

在这里插入图片描述

回到 Hexo 目录（如我的 E:\cdtaogang_hexo\myblog），重新生成文件并部署到GitHub 仓库

hexo g -d

在这里插入图片描述

3. 个人域名访问

经过以上操作，everybody 就可以通过 www.cdtaogang.xyz 、cdtaogang.xyz 、cdtaogang.github.io 任意一个访问我的博客了，小伙伴们搞定了吗（如果 www.cdtaogang.xyz 、cdtaogang.xyz 不能访问只有一个情况，那就是域名到期了，博主没有续费了，但是 GitHub Pages 提供的免费静态服务器以及仓库域名 cdtaogang.github.io 肯定是可以永久访问的）

访问 www.cdtaogang.xyz （Chrome）
访问 cdtaogang.xyz （Firefox）
访问 cdtaogang.github.io（Microsoft Edge）

4. 启用HTTPS

什么是HTTP?

超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

什么是HTTPS?

超文本传输安全协议，是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。

域名解析后，通过访问CNAME 文件中配置的域名 www.cdtaogang.xyz 发现是属于不安全的（也就是 HTTP 协议）

在这里插入图片描述
进入你的GitHub仓库，也就是 yourusername.gitub.io 这个仓库（如我的 cdtaogang.github.io），点击进入【Settings】—— 往下翻【GitHub Pages】——点击【Check it out here!】—— 勾选【Enforce HTTPS】即可（如果不能勾选，清空 Custom domain 数据 Save 后刷新页面，勾选成功后，记得填回Custom domain 输入框中的域名然后 Save 保存即可）
在这里插入图片描述