2021 搭建一个属于自己的静态网站（Hexo+GitHub Pages）

最新推荐文章于 2024-07-12 14:51:48 发布
最新推荐文章于 2024-07-12 14:51:48 发布
阅读量3.8k 收藏 16
点赞数 7
分类专栏： 网站搭建 # hexo 文章标签： hexo 网站搭建 github 域名解析 网站部署
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_41782425/article/details/117303274
版权

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

文章目录

前言

在上一篇《 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

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: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: 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: cdtaogang
  avatar: https://cdn.jsdelivr.net/xxxx/images/avatar_4.png
  url: 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 肯定是可以永久访问的）

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 保存即可）
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
完成以上操作后，只需要等待十分钟左右，刷新当前页面，就可以看到网站站点地址变成了 HTTPS 了,

在这里插入图片描述
再次访问你的域名（我的 www.cdtaogang.xyz），就能看到不再是不安全的HTTP协议了，而是HTTPS协议，大功告成~

在这里插入图片描述

.

cdtaogang
关注
专栏目录
使用github建立自己的简单网站并绑定域名
liver100day的博客
04-21 1018
使用github建立一个自己的简单网站 准备工作：在建立简单网站的时候不需要使用到git，但是后续在向网站中新增内容时，需要使用到git命令 这里git的安装可参考我的上一篇文章https://blog.csdn.net/liver100day/article/details/115919398 注册github 没有github账号的需要去注册一个，github官网：https://github.com/ 点击“sign up”或者输入Emall，并点击"sign up for GitHub" 注册非常
hexo+GitHub Pages一键搭建部署博客
weixin_42372852的博客
01-25 886
前言： 现在技术更新迭代是非常的快，尤其是web方面！所以当前搭建一个博客差不多有手就行，这里我们用到hexo进行博客的一键生成和部署。我自己的博客也是用hexo搭建的：杨Yang 博客相关配置 matery主题相关配置 1. 什么是 Hexo？ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 hexo官网：https://hexo.io/ 2. 准备工作： 安装Git： Windows：下载并安装git。
github Pages建立站点
咖喱辣椒
06-27 409
使用Github Pages功能建立站点 在blogs仓库下，选中 Settings 选项，找到 GitHubPages ，在 Source 下面选择 master branch/docs folder 选项。 在这里有个问题，我以前绑定了一个域名所以一开始默认就是我原先绑定的域名 http://yanglele.xyz 使用了阿里云的自定义域名绑定在了GitHub pages ，想取消怎么办？ 首先进入你的GitHub Pages项目主页，然后找到以前上传域名的文件，一般域名文件叫做“CNAM
如何使用Github Page搭建个人网站【踩坑实录&多图预警】
最新发布
WHYbeHERE的博客
07-12 3119
使用GIthub Page 搭建个人网站的全过程记录
Github Pages 搭建网站
qq_45225613的博客
09-03 252
个人站点 访问 https://用户名.gitub.io 搭建步骤 1. 创建个人站点 ->新建仓库（仓库名必须是【用户名.github.io】） 2. 在仓库下新建index.heml文件即可 3. Github pages仅支持静态网页 仓库里面只能是heml文件 Project pages 项目站点 https://用户名.gitub.io/仓库名 搭建步骤 1. 进入项目主页，点击settings 2. 在settings主页点击【】 ...
GitHub Pages 快速搭建自己的网站 ！
Soutv - Hello Bug !
03-10 2795
如何利用 GitHub Pages 快速搭建自己的网站 ？ 1. 注册登陆 GitHub Github 2. 创建一个 Repository 名称位置随意，然后点击创建 注意：Repository 必须是公开 Public 的，不能是私人仓库（私人仓库需要升级 GitHub Pro （$4 / month） 才能使用 GitHub Pages 3. 回到 Repository 页面，点击右上角的 Setting 找到 GitHub Pages 的配置项 然后点击 Change theme ，选择其中一
Github Pages 搭建个人网站
zhuguanlin121的博客
07-02 671
个人站点访问 搭建步骤 1.创建个人站点 1）.新建仓库 2）.填写仓库资料 3）.访问成功 2.新建index.html文件 1.）点击 creat new file 2.）填写文件 3）.再次访问个人主页 项目站点访问 搭建步骤 1.进入项目主页，点击setting 2.在GitHub Pages 中点击Choose a theme 3.选择你喜欢的主题，点击select theme 4.编辑网页内容并提交 5.网页生成成功
Hexo+github 所需工具
02-03
关于“Steam_v3.0.0-rc.3_win_x64.exe”，这看起来是一个游戏平台Steam的更新文件，与Hexo和GitHub的博客搭建无关，可能是误放入压缩包的。 总结起来，使用Hexo+GitHub搭建博客主要涉及以下步骤： 1. 安装Node.js和...
hexo+github搭建个人博客
hqf2018的博客
04-16 270
windows环境下 准备工作 1. 下载安装node.js并安装，默认安装npm 2. 下载安装git和Git Bash 本地搭建hexo静态博客 1. 新建一个文件夹，如myBlog 2. 进入该文件夹，右键点击Git Bash Here 3. 下载安装hexo：npm install hexo-cli -g 4. 生成hexo模板：hexo init blog ...
hexo+github pages(gitee pages双线部署)博客搭建
tbaglee's blog
01-26 934
hexo博客搭建1. 准备工作git 和 node.js安装npm 和 cnpm2.Hexohexo安装hexo 配置3.github配置 SSH key4.部署到github5.发表博客6.更换主题及完善7.博客进一步优化 1. 准备工作 git 和 node.js安装 git ，一个分布式版本控制系统，用于项目的版本控制管理。 node.js，因为Hexo 是基于 Node.js 驱动的一款博客框架。 npm 和 cnpm npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多
hexo +GitHub个人搭建的博客
08-04
配合GitHub Pages服务，个人可以轻松搭建属于自己的博客。在本压缩包中，"blog"可能包含了博主整个博客项目的所有文件，包括配置、主题、文章源文件等。下面将详细阐述Hexo和GitHub搭建个人博客的过程及关键知识点。...
wpdeployer：直接从GitHub，Bitbucket和GitLab无痛部署WordPress主题和插件
02-05
WP部署者 根据的免费版本进行了修改，该版本根据获得。 请考虑支持。 附加功能 支持私有存储库 无限的网站
【前端技术】从零开始在github创建个人主页或技术博客
01-08
【前端技术】在github创建个人主页或技术博客1、注册github账号2、创建个人主页专属仓库3、了解主页框架css代码并下载3、修改index.html文件4、把修改好的index.html文件连同css文件夹上传到你的“`username.github.io“`5、检验你的成果 闲在家里，打算出一个前端系列的技术博客，讲一下自己学习网站搭建、HTML、CSS、Javascript、Django等的学习经历。 对于新手来说，在github搭建免费的个人主页，不失为一个很好的练手方法，以下将记录我在很久以前在github搭建个人博客的经历。 1、注册github账号 GitHub是一个面向开
Github Pages建立静态网站
weixin_34100227的博客
01-24 105
Github Pages对于建立静态网站来说真的是超级方便，概念方便，配置方便。只要你不超出HTML+Javascript+CSS的范围，一切都好说。如果为了漂亮，可以使用Bootstrap等各种技术加强页面显示，只要是静态的，一切都好说。 个人主页vs项目主页 参考：单个GitHub帐号下添加多个GitHub Pages的相关问题 Gi...
github+hexo搭建博客-2021
caicsama的博客
01-11 746
搭建博客 必要条件： 1. github账号，配置了ssh 2. 本地安装node，win+R,cmd进入命令行，node -v出现版本号，安装了node，版本不能低于10.13 3. 首先得有一个github的账户，配置了ssh,New repository，仓库名 本地创建文件夹，例如：创建Blog文件夹,安装hexo 下面的内容都是在Blog目录下完成（如果不是，会标明） 全局安装： npm install -g hexo-cli 同样进入命令行输入：hexo -v查看版本号，是否安装成功 建站：
25、静态查找表（顺序表、索引顺序表、静态树表、折半查找） http://blog.163.com/zhoumhan_0351/blog/static/39954227200993093110226
诺尔曼
01-02 1145
EdwardLewis 25、静态查找表（顺序表、索引顺序表、静态树表、折半查找） 一、基本概念 1、查找表：同一类型的数据元素（记录）构成的集合。 2、静态查找表：对查找表只进行查找操作。动态查找表：不仅进行查找操作，而且在查找过程中还伴随着插入（查找的数据元素不在表中时）、删除某个数据元素的操作。 3、关键字(key)：是数据元素（或记录）的某个数据项的值，用它可标识（识别）
使用 Hugo 和 GitHub Pages 搭建并部署一个静态博客网站
jaredyam's blog
03-06 2062
本文将介绍如何使用 Hugo 搭建静态博客网站、使用和定制 hugo-PaperMod 主题以及将网站部署在 GitHub Pages。
GitHub建立个人网站（一）
热门推荐
WeisongZhao
05-03 1万+
github可以当做自己的个人博客网站，做一个这样的网站的好处有哪些：装 X（如果网站够炫的话。ps：以后抽空闲下来了，肯定要弄个好看的页面，好好装X）很好的用来总结自己所学的知识（可能因为流量的问题，github上面确实只能当做记载的，但是不能传播出去）面试加分（在简历上放上自己的个人网站链接，面试官就可以更好的了解你，知道你所学知识的深度和广度，这点我觉得是相对最重要的）不再受其他博客平台的规...
hexo+github
09-27
Hexo是一个基于Node.js的静态博客框架，可以帮助你快速搭建个人博客。要在GitHub上部署Hexo博客，首先要创建一个和你用户名相同的仓库，并在仓库名后面加上.github.io。这样，将来要部署到GitHub Pages时，才会被识别为个人博客网站。然后，你需要生成SSH密钥，并将其添加到GitHub账户中。接下来，你可以将Hexo部署到GitHub，并设置个人域名。最后，你可以发布文章来填充你的博客内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cdtaogang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值