珠玉在前

我需要感谢毛若昕先生的热铁盒旗下的网页托管：这也许对于我并不是一个很好的网页托管平台，但它发挥了抛砖引玉这个最重要的作用，让我开始接触「前端」
感谢W3School、Runoob（菜鸟教程）、W3Cschool和MDN：它们教我HTML、CSS、Javascript。
感谢创客贴：我使用它的工具做了BLOG网站和主站的图标。
感谢GitHub以及它的许多极其有用的工具之一GitHub Pages：GitHub为我提供了代码平台，而GitHub Pages则是更重要的网站工作，它可能是我最爱的网站，这里所有人足够谦虚，自由的上传代码。开源是大势所趋！
感谢Git：它是GitHub的核心。
感谢CloudFlare：它的Pages服务带着GitHub和GitLab，且速度大大增快了。
感谢MJJ手册和免费建站资源，后者更新快详细加载速度慢，前者加载速度快。但它们的内容都差不多~
感谢工具库，尤其是它的其中的三个功能CSS优化、HTML优化和Javascript优化：它大大提升了代码的可读性。
感谢TinyPNG以及格式工厂：我常常用格式工厂将图片转为WebP，再用TinyPNG将WebP压缩，这两个工具大大提升了我网站的加载速度。
感谢IPaddress：它为我提供了查询IP的功能。
感谢码工具的在线网页地址栏favicon图标制作：虽然后来知道格式工厂也可以完成同样的功能，但它为我提供过帮助。
感谢GitHub Proxy和GitHub 文件加速（它似乎有很多域名）这是他的GitHub开源地址它参考了EtherDream的代码以及著名插件GitHub加速：它们在我下一条感谢之前为我GitHub的下载提供了帮助。
感谢SwitchHosts和GitHub520：这两个工具套在一起用让我的GitHub体验更好了。
感谢Freenom：它绝对是我建站中的重中之重之一，它为我提供了免费的顶级域名！
感谢Wallhaven：它为我提供了足够好也足够多的壁纸。
感谢不知名的时间线作者：预览网站已经没了，下载会提示不安全。我的主站历程是按照这个模板的。
感谢黄玄先生的BLOG模板，这是他的GitHub地址，这是他的知乎地址，这是他的微博地址，这是他的BiliBili地址：他的模板很流行，写的很好，这是我的BLOG的来源。
感谢Bebop的BLOG，在我搜索万青的解读时，我搜到了他的BLOG，这是他的GitHub仓库地址：他让我开始研究BLOG。
感谢qiubaiying的BLOG，再深入发现Bebop是fork的他的仓库，这是他的GitHub仓库地址：我开始莽撞的搭建BLOG网站。并深入到Hux黄玄的仓库。
感谢[一个我忘记网址的模板]：我开始做一个静态音乐播放器，大重启了两次，都失败了。

前言

在建站过程中，踩了很多坑，但我经常秉着一个意念，电脑应该多点、多试、多错、多学、多搜，这样无论如何都会达到目标。以下教程极其详细，是面对小白的。

看看电脑博客的样式：

看看手机博客的样式：

一、开始

（一）需要一个GitHub账号

我使用GitHub Pages+Jekyll。如果要使用GitHub Pages，那就需要一个GitHub账号，GitHub可能是世界最大的开源网站。如果接触GitHub，那就会发现这简直是一个巨大的宝藏。很多时候会用上GitHub上一些大佬的杰作，注册一个绝对不亏。

下面图文很多，GitHub加载缓慢，请耐心等待呐

1. 注册

（1）点击右上角的Sign up（注册）

（2）输入一个邮箱并点击Continue（继续）

翻译一下：

Enter you email

输入您的电子邮件地址

（3）输入一个密码并点击Continue（继续）

翻译一下：

Create a password

创建一个密码 create这个词会在GitHub高频出现请务必记住它。

（4）输入一个名字并点击Continue（继续）

!WARING! GitHub的名字是唯一的 !WARING!
GitHub我最近一次注册的时候感觉很抽风，有时候输入一个名字不能使用，然后删掉一个字母再加上，就又行了，魔幻……所以可以多试几次~。当然名字也可以以后再改

翻译一下：

Enter a username

输入一个用户名

（5）选择是否让GitHub通过邮箱给你发送通知

个人觉得反正邮箱现在就是个验证码收集箱……我选的y，感觉用起来也好，你在仓库的讨论，别人回复你会在邮箱收到通知。

翻译一下：

Would you like to receive product updates and announcements via email? Type "y" for yes or "n" for no

您希望通过电子邮件接收产品更新和通知吗？输入"y”表示是，输入"n”表示否

（6）进行人机验证（看你是不是机器）并点击create account（创建账户）

翻译一下：

Verify your account

验证你的账户 这个内容不怎么一样，我最近一次注册，让我认星云……

（所以这里没有图捏）

（7）输入邮箱GitHub发来的验证码

翻译一下：

You're almost done!
We sent a launch code to XXXX@XXXXX.com

Didn’t get your email? Resend the code or update your email address.</center>

你快完成了！我们发送了一个验证码到XXXX@XXXXX.com
Didn't get your email? Resend the code or update your email address.

因为我是拿的一个僵尸号完成前面的注册，所以不会有验证码。估计输个验证码就注册完了。

（所以这里没有图捏）

二、拉取黄玄先生或者我的模板

（1）点击左上角的输入框

（2）输入`Cheong-Szesuen.github.io`并按下键盘的`Enter`或者`回车`

（3）点击`Cheong-Szesuen/Cheong-Szesuen.github.io`

（4）点击右上角的Fork

我的界面可能跟你看到的不太一样，有些是扩展加上去的，不过不需要管它们，fork没有被改，所以直接点fork就行啦

（5）修改Repository name（仓库名）并点击Create fork（创建一个fork）

修改==Cheong-Szesuen==为你的==用户名==，就是左边的那个，照着替换了就行。比如==CheongSzesuen.github.io== 。下边有个Description（介绍）也可以修改，可选可不选，可以把我的介绍删了。其他的就不要改了。

然后会自己跳转到fork完的页面

三、开始部署GitHub Pages

（1）点击上方的Setting（设置）

（2）点击左边的列表中的Pages（页面）

（3）点击Depoly from a branch（从一个分支部署）

（4）点击GitHub Actions

点完后会自动刷新，点完后就是下图这样子

（5）Pages 页面出现下图的样子就是好了

（6）这时候在浏览器的地址栏输入==你的GitHub名字.github.io==就会出现页面

如果出现下面的页面，请检查仓库名或者输入的地址

如何修改仓库名？

（1）点击仓库界面的Setting

（2）点击中间的输入框改完之后点击Rename（重命名）

四、修改

（一）一些工具

这一大节，我觉得最好有个GitHub Desktop和Visual Studio Code，会方便很多，下面会教有GitHub Desktop的方式，如果你熟练Git也可以~ 如果你是32位电脑就用不了GitHub Desktop咯，GitHub Desktop只有64位。

1.如何下载Git或GitHub Desktop

因为GitHub Desktop下载速度太太太太太太慢，Git还好有镜像网站（只有windows），戳我通往Git镜像网站。我放个网盘链接。解释一下，32bit是32位电脑的，64bit是64位电脑的，如果不知道可以右键“我的电脑”或“此电脑”查看RAM（内存）是否大于2GB，大于2GB就是64位电脑。阿里云和其他有点不一样，因为阿里云分享mac的GitHub的zip的时候提示不能分享，所以把它解压了，提示选择文件过多无法分享…..我把阿里云的GitHub Desktop删了。百度云链接
 阿里云链接
 蓝奏云链接密码:1f1w
本站下载Git | 本站下载Windows版GitHub Desktop | 本站下载Mac版GitHub Desktop

2.如何下载Visual Studio Code

首先到Visual Studio Code的官网。下面会分成32位和64位分别讲述

a.Windows64位

如果你是Windows，那么中间会显示Download for Windows（下载Windows版本）然后会发现下载速度奇慢（靠！今天是2022年12月30日，奇了！VScode下载速度居然不慢了！），所以，复制下载链接，是这样一串链接https://az764295.vo.msecnd.net/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCodeUserSetup-x64-1.74.2.exe到关键了，把az764295.vo.msecnd.net这部分换成vscode.cdn.azure.cn再建一个新标签页，输入替换完的https://vscode.cdn.azure.cn/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCodeUserSetup-x64-1.74.2.exe就会下载了。

b.Mac

如果你是Mac，那么中间会显示Download Mac Universal（下载Mac通用版）然后会发现下载速度奇慢（靠！今天是2022年12月30日，奇了！VScode下载速度居然不慢了！），所以，复制下载链接，是这样一串链接https://az764295.vo.msecnd.net/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCode-darwin-universal.zip到关键了，把az764295.vo.msecnd.net这部分换成vscode.cdn.azure.cn再建一个新标签页，输入替换完的https://vscode.cdn.azure.cn/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCode-darwin-universal.zip就会下载了。

c.Windows32位

点击右上角Download，会看到Windows标志下有四行x86，随便点个，然后会发现下载速度奇慢（靠！今天是2022年12月30日，奇了！VScode下载速度居然不慢了！），所以，复制下载链接，是这样一串链接https://az764295.vo.msecnd.net/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCodeUserSetup-ia32-1.74.2.exe到关键了，把az764295.vo.msecnd.net这部分换成vscode.cdn.azure.cn再建一个新标签页，输入替换完的https://vscode.cdn.azure.cn/stable/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/VSCodeUserSetup-ia32-1.74.2.exe就会下载了。

（二）网站的结构

├── _doc
|   ├── SomeArticle.md
├── _includes
|   ├── about
|   |   ├── en.md
|   |   └── zh.md
|   ├── posts
|   |   ├── en.md
|   |   └── zh.md
|   ├── featured-tags.html
|   ├── footer.html
|   ├── friends.html
|   ├── head.html
|   ├── intro-header.html
|   ├── mathjax_support.html
|   ├── multilingual-sel.html
|   ├── nav.html
|   ├── search.html
|   ├── short-about.html
|   ├── sns-links.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── keynote.html
|   ├── page.html
|   └── post.html
├── _posts
|   ├── SomeArticle.textile
|   └── SomeArticle.md
├── css
├── fonts
|   ├── glyphicons-halflings-regular.eot
|   ├── glyphicons-halflings-regular.svg
|   ├── glyphicons-halflings-regular.ttf
|   ├── glyphicons-halflings-regular.woff
|   └── glyphicons-halflings-regular.woff2
├── img
|   ├──post
|   |    ├──A article title
|   |    |   └──some photos.webp
|   |    └──A article title
|   |        └──some photos.webp
|   ├── some photos.webp
├── js
|   ├── animatescroll.min.js
|   ├── archive.js
|   ├── bootstrap.js
|   ├── bootstrap.min.js
|   ├──CheongSzesuen Blog.js
|   ├──CheongSzesuen Blog.min.js
|   ├── jquery.js
|   ├── jquery.min.js
|   ├── jquery.nav.js
|   ├── jquery.tagcloud.js
|   ├── simple-jekyll-search.min.js
|   ├── snackbar.js
|   └── sw-registration.js
├──less
|   ├── CheongSzesuen-Blog.less
|   ├── highlight.less
|   ├── mixins.less
|   ├── search.less
|   ├── side-catalog.less
|   ├── sidebar.less
|   ├── snackbar.less
|   └── variables.less
├──pwa
|   ├── icons
|   |   ├── 128.png
|   |   └── 512.png
|   ├── manifest.json
├── _config.yml
├── .gitignore
├── 404.html
├── about.html
├── archive.html
├── feed.xml
├── Gemfile
├── Gruntfile.js
├── index.html
├── offline.html
├── package-lock.json
├── package.json
├── Rakefile
├── search.json
└── sw.js

看不懂？如果只是改改也不需要看懂，下面会教怎么更改。

（三）用Git或GitHub Desktop Clone（克隆）下来

GitHub Desktop

1.用刚才fork的账户登录GitHub Desktop（GitHub Desktop是没有中文的，所以得摸索）

3.点击左上角`File`

4.点击`Clone Repository`

5.点击Your repositories下显示的你fork的那个仓库

6.可以选择克隆的Local path（本地路径）（注意个本地的文件夹必须是空的）

7.点击`Clone`（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

6.然后点击`Open in Visual Studio Code`

7.当完成一整个修改或者写文章的操作，请点击左下角的`Summary(required)`和`Description`填写更新信息。

8.并点击`Commit to main`

9.再点击右方一个蓝色的`push origin`（可能要多试几次，不稳定，看到蓝色的框不见了，就是好了）

Git

1.Git如何连接GitHub请学习廖雪峰先生的Git教程，简明易懂

1.在本地创建一个文件夹，文件夹不要有任何东西。

2.打开，然后右击在你的本地根目录，右击新建，选择git base here

4.在你刚fork创建的仓库点击一个绿色的`Code`

5.复制https或者SSH值

6.在刚打开的Git命令行窗口输入下方的命令

$ git clone 刚复制的https或SSH值

7.按下`Enter`或者`回车`键（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

8.然后打开文件夹右键`通过code打开`

（四）修改_config.yml

1.什么是_config.yml?

_config是这个BLOG网站的全局的部署文件

2.更改

基础设置

# Site settings
title: 我不知啊      #你的BLOG标题
SEOTitle: 我不知啊   #SEO标题是搜索引擎搜出来的标题
header-img: "img/home-bg.webp"   # 这是首页的背景图片
email: X2430442963X@outlook.com  #你的邮箱
description: "和光同尘."          #你的简介
keyword: "张思璇, CheongSzesuen, HTML, 网站, CSS, BLOG，blog, ZSX, cheongszesuen, cheong-szesuen"  #哪些是网站的关键字，用于搜索
url: "https://wbza.tk" # 你的网站地址
baseurl: "" # 举个例子, '/blog' 如果你的blog托管在 'host/blog'

社交信息

RSS: false
weibo_username_none: CheongSzesuen      #这是微博不带的
weibo_username_u: CheongSzesuen         #这是微博带u的
zhihu_username: CheongSzesuen       #这是知乎的
github_username: CheongSzesuen      #这是GitHub的
youtube_channel: UCYEbo0NW0UG1IrzD9X4_V7Q       #这是YouTube的
twitter_username: CheongSzesuen     #这是推特的
facebook_username:  CheongSzesuen       #这是脸书的
linkedin_username:  firstname-lastname-idxxxx       #这是领英的

如果你没有其中的一些账号，或者你不会正确指向。请你注释掉相对应的，注释请使用#加在这行的前边

下面会说分别怎么设置。微博，首先进入你的微博个人主页，看地址栏，我发现有两种，一种是https://weibo.com/u/+一串东西，一种是https://weibo.com/+直接加了一串东西第二种后面跟的可能自己比较熟悉，可能是自己的最开始的用户名。

首先看自己是带不带u的，不带u就在weibo_username_none: XXXXX这里把XXXX替换掉，然后把weibo_username_u: XXXXX注释掉，也就是在前边加#。

带u就在weibo_username_u: XXXXX这里把XXXX替换掉，然后把weibo_username_none: XXXXX注释掉，也就是在前边加#。

知乎让我们看看知乎个人主页的链接形式，拿我的举例，https://www.zhihu.com/people/luminouszhu-jiang-wan他的形式是https://www.zhihu.com/people/+最开始创建用户的名字（但是这个后边加的这段是可以更改的，但只能更改一次。
zhihu_username后面接的就是你个人主页的后边那串，我的就是luminouszhu-jiang-wan。那我zhihu_username后面就应该写luminouszhu-jiang-wan，而我的用户名实际是CheongSzesuen所以这个得看实际情况。

GitHub

我带了两个GitHub一个是大号一个是小号的……只有一个的可以直接注释掉，前边加个#。Github还好，主页名是跟着换的。还是那样，到自己的GitHub主页，看http://github.com/后边跟的是什么，把后边跟的复制到github_username: 后边。

Youtube

老规矩，到YouTube个人频道，看地址栏，是https://www.youtube.com/channel/+一串奇怪的东西。把这串奇怪的东西复制到youtube_channel: 后。

Twitter、FaceBook、

还是老规矩，领英没用过……

百度和Google的统计

# Analytics settings
Baidu Analytics
ba_track_id: [你的track id]

Google Analytics
ga_track_id: "UA-49627206-1" # Format: UA-xxxxxx-xx
#ga_domain: huangxuan.me

集成了百度统计和Google统计。若不想启用统计，直接删除或注释掉就可以了

侧栏

# Sidebar settings
sidebar: true   #是否使用侧栏
sidebar-about-description: "和光同尘"   #头像下的一句话，介绍一下你自己~
sidebar-avatar: /img/Cheong Szesuen.jpg # 使用绝对路径，绝对路径是从根目录的文件夹开始直到目标的文件路径

好友（友情链接）

# Friends
friends:
  [
    { title: "我的个人网站", href: "http://cheongszesuen.cf/" },   #title后边的双引号里是地址要显示的名字，href:"这里是网站地址"
    { title: "HHZ", href: "https://https://dangerous-hhz.rth1.one/" },
  ]

文章标签

# Featured Tags
featured-tags: true #是否使用featured tags
featured-condition-size: 1 # 如果标签使用的次数大于指定的值，则会出现在右侧

PWA渐变式网页软件

# Progressive Web Apps
chrome-tab-theme-color: "#000000"
service-worker: true

如果你是Chrome、Edge或Safari用户，那进入这个blog网站，地址栏右方会显示一个图标，点击可以让这个blog网站作为一个软件安装。

Keynote Layout

HTML5幻灯片的排版：

这部分是用于占用html格式的幻灯片的，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~

其主要原理是添加一个 iframe，在里面加入外部链接。你可以直接写到头文件里面去，详情请见下面的yaml头文件的写法。

layout:     keynote
iframe:     "http://huangxuan.me/js-module-7day/"

iframe在不同的设备中，将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动，以及添加更多的内容。

（五）修改文件

1. 根文件夹下的

（1）index.html文件

首先看头文件，description也就是标题下面的小字。可以更改成自己想要的。

layout: page
description: "其义自见"

再看第32行到45行，那里的上一页本来是NEWER POSTS，那里的下一页本来是OLDER POSTS，我感觉还是中文好。

<!-- Pager -->

（2）about.html文件

首先看头文件，title就是会在页面标题和背景图上面的大字，可以改，不过感觉不需要改。
description也就是标题下面的小字。可以更改成自己想要的。
header-img就是背景图，使用绝对路径，不知道什么事绝对路径就去搜一搜，就是要从根目录开始的路径。

layout: page
title: "关于我"
description: "「我们将会在没有黑暗的地方见面」"
header-img: "img/about-bg.webp"
header-mask: 0.3
multilingual: true

（3）archive.html文件

首先看头文件，title就是会在页面标题和背景图上面的大字，可以改，我翻译不出一个好的，本来是Archive，如果你有好的建议可以给我的仓库Issues一下。
description也就是标题下面的小字。可以更改成自己想要的。
header-img就是背景图，使用绝对路径。

title: 分类
layout: default
description: "「我干了什么 究竟拿了时间换了什么」"
header-img: "img/archive-bg.webp"

（4）404.html文件

首先看头文件，title就是会在页面标题和背景图上面的大字，可以改，可以写一句幽默点的话
hide-in-nav可以选择true或者false，true代表如果是404页面，那就隐藏导航栏内的404页面，false代表如果是404页面，那么不隐藏导航栏内的404页面。这个没什么用，直接选true就好了。
description也就是标题下面的小字。可以更改成自己想要的。
header-img就是背景图，使用绝对路径。

layout: default
title: 怎么就走错了呢
hide-in-nav: true
description: "[ ' / ' ]"
header-img: img/404-bg.webp
permalink: /404.html

（4）offline.html文件

首先看头文件，title老规矩，但要告诉用户“阅读过的页面可以在离线时访问”这个内容，如果可以，可以幽默一点。
hide-in-nav可以选择true或者false，true代表如果是offlin页面，那就隐藏导航栏内的404页面，false代表如果是404页面，那么不隐藏导航栏内的offline页面。这个没什么用，直接选true就好了。
description也就是标题下面的小字。可以更改成自己想要的。
header-img就是背景图，使用绝对路径。

layout: default
title: 阅读过的页面可以在离线时访问
hide-in-nav: true
description: "[ ' \ ' ]"
header-img: "img/404-bg.webp"
permalink: /offline.html

2. _includes文件夹下的

（1）双文的个人介绍

进入_includes文件夹，再进入about，这里有两个文件夹，一个是en.md，一个是zh.md 在en.md下

Write down something to describe yourself!

在zh.md下

写点东西来描述你自己!

（2）网站图标

进入_includes文件夹，再进入head.html，查看第41行代码。修改后面的路径。或者将你预备的图标，放入img文件夹替换掉也行。我用的png图片，只是因为png可以做透明的效果，可以用用其他的。

<link rel="shortcut icon" href="/img/favicon.png">

（3）当md文件是双语的时候切换语言时显示的内容

进入_includes文件夹，再进入multilingual-sel.html，一般这个不用改。

<option value="0" selected> 中文 | Chinese </option>      #可以把中文 | Chinese 改成你想要的
<option value="1"> 英文 | English </option>         #可以把英文 | English 改成你想要的

（4）导航栏主页的字样

进入_includes文件夹，再进入nav.html
在第24行，首页这两个字可以改成你想要的，比如主页或者其他词。

<a href="/">首页</a>

（5）社交信息的网站形式（如果看不懂请不要管它）

进入_includes文件夹，再进入sns-links.html
举一个栗子，在第33行。

<a target="_blank" href="https://www.zhihu.com/people/luminouszhu-jiang-wan">

target="_blank"这段表示后边的链接会在新的标签页打开
我推测可以继续加社交网站，暂时不知道怎么设置图标，待我学qiubaiying先生加的简书归来后我会继续写。（挖坑） 2023年1月10日学会了，马上说。

3. _layout文件夹下的

（1）搜索引擎搜出来显示的图标

进入_layout文件夹，再进入default.html
看第18行，<img src="/img/search_icon.png" width="0" height="0" />我发现这行的地址，对应的图片是搜索引擎搜出来右边的图标。可以改，但是freenom的四大免费顶级域名，好像百度都不收录。不知道其他搜索引擎怎么样，想改就改吧。更改方法还是那，要么改路径，要么换成一模一样的名字替换了。

（2）幻灯片的配置页面

进入_layout文件夹，再进入keynote.html
这个没什么改的，现在我还不会改，先挖个坑再说。

（3）疑似页面的结构

进入_layout文件夹，再进入page.html
页面就是那些，比如home页，about页面之类的。还暂时没有改的头绪。

（4）疑似文章页面的结构

进入_layout文件夹，再进入post.html
还暂时没有改的头绪。

五、写文章

Markdown

不要被这个语言吓到，实际它很简单，我比较主张直接实操，遇到问题去搜索，甚至不用学。如果要学可以看看Markdown官方教程和菜鸟教程的Markdown教程

文章的格式

文件的名字

文件的名字是固定的年-月-日-标题.md如：2023-01-01-你好2023.md 注意：即便是一月也要写成01，日是同理

文章的固定格式

博客文章格式采用是MarkDown+ YAML 的方式。YAML 就是我们配置 _config文件用的语言。 YAML头文件是这样子的

---
layout:     post   				    # 使用的布局（不需要改）
title:      我是标题 	             # 标题 
subtitle:   我是副标题               #副标题
date:       2017-02-06 				# 时间
author:     CheongSzesuen 			# 作者
header-img: img/post-bg-2015.jpg 	#这篇文章标题背景图片
catalog: true 						# 是否归档
tags:								#标签
    - 生活                          
---
我是文章我是文章我是文章我是文章我是文章我是文章我是文章我是文章

到这里，网站就正式完工了。

五、域名

在这里介绍Freenom，这是为数不多免费提供顶级域名的域名服务商。
它提供.tk(南太平洋岛国托克劳Tokelau).ml(马里共和国Republic of Mali) .ga（加蓬共和国The Gabonese Republic）.cf（中非共和国Central African Republic）.gq（赤道几内亚共和国The Republic of Equatorial Guinea）
这些国家因为都比较小，也不怎么发达，所以域名也没什么用，就给Freenom，让Freenom售出，在Freenom上这四个域名可以免费使用一年（不过话说回来我一个ml的域名从八九月到现在2022年12月30日都三四个月了，我当时设置的三个月……不知道怎么搞的。去看了一下，“我的域名”页面以及没有了，但是这域名我还能用……沉默了）
注册域名的过程有些麻烦，我得到域名的过程很艰难，但最终得到了一个有用的方法，所以写在这。我的方法来自这位作者，在这里贴上原帖地址。
注意
2023年1月5日22:55:08，freenom无法注册，显示“IMPORTANT NOTICE: Because of technical issues the Freenom application for new registrations is temporarily out-of-order. Please accept our apologies for the inconvenience. We are working on a solution and hope to resume operations shortly. Thank you for your understanding.”

重要通知: 由于技术问题，Freenom 的新注册申请暂时无序。对于给您带来的不便，请接受我们的道歉。我们正在研究解决方案，希望能尽快恢复运营。谢谢你的理解。

意思是注册不了了，现在是2023年4月30日02:26:37，我打开freenom，不知道是不是插件原因，这句话都没有了，大抵以后都没有免费域名了（悲）。

需要的工具

必须使用==电脑==，和==Chromium Edge==或者其他支持扩展的浏览器

1.下载需要的工具

百度云链接
 阿里云链接
 蓝奏云链接
 本站下载

这是解压出来的文件，gooreplacer.crx和Header Editor.crx是两个插件。gooreplacer和Header Editor两个文件夹是两个插件对于Chrome和其他需要导入的浏览器的插件文件。HE-GoogleRedirect.json是Header Editor.crx插件需要的文件。

2.对于Chromium Edge的过程

(1)点击浏览器右上角的菜单

(2)点击扩展

(3)打开Microsoft Edge加载项

(4)搜索`Gooreplacer`，并安装

(4)搜索`Header Editor`，选择后边带有FirefoxBar的版本并安装

2.对于Chrome的过程

(1)点击浏览器右上角 ⋮ > 更多工具 > 点击扩展程序

(2)在扩展中心打开右上角的`开发者模式`按钮，然后刷新页面，将下载好的两个插件的文件夹直接拖入浏览器

2.对于360浏览器的过程

(1)直接将两个crx文件拖入浏览器

3.设置Header Editor（以Edge做例子）

(1)点击右上角的扩展图标，点击`Header Editor`

(2)点击`管理`

(3)点击`导出和导入`

(4)点击`导入`并找到下载的`HE-GoogleRedirect.json`文件

(5)选中`HE-GoogleRedirect.json`，点击`打开`

(6)点击保存，成功

4. 开始注册

（1）进入网站

进入Freenom，速度比较慢，务必耐心，注册完就不经常用它了。

（2）搜索需要的域名

①在Find your new domain处输入域名（可以不带顶级域名）
②再按Enter键。比如我要注册wbza.gq，我输入wbza，再按Enter键。出现下面的页面。

第一个右边没有Get it now!是因为这是我现在的BLOG地址，被我占用了。

（3）选择需要的域名进入cart（购物车）

点击右边的Get it now!出现下面的就是加入cart（购物车）了。购物车是我自己意译的，感觉功能差不多。

这样就是说明不能用，以及有人注册过了（因为这是我现在的BLOG地址，被我占用了）

你可以把几种免费的都加入购物车，我觉得没什么必要，就不了。不要贪心！滥用会被举报！

（4）点击Checkout

（5）选择时间

①选择12个月

②点continue。

一次搞好，Freenom加载慢，难管理。

（6）输入并验证邮箱

①在Enter Your Email Address（输入您的电子邮箱地址）处输入一个邮箱地址（可能会在垃圾邮件里，如果没收到请查看插件在不在，地址对不对，垃圾邮件有没有）。

②点击Verify My Email Address（验证我的电子邮箱地址）然后你会收到一封像下面图片所示邮件一样的邮件（这是我之前注册的时候的邮件） ③点击激活链接（中间最长的那个）

（7）填写信息

①前面的信息可以随意填写，感觉填个中国的会好一点，似乎有一说，说会看IP所在国家和填写的信息是否相同。Phone Number（电话号码）改成自己的，最下面有一个格子，记得打钩。再点击Complete Order。
下面这张图是网络的，我自己注册过了，就不再注册了。
翻译一下从上到下依次是：名字-姓氏-公司名-住址-邮政编码-城市-国家-州/地区-电话号码-电子邮箱地址-密码-再次输入密码。

（8）查看订单

我倒是没收到邮件，但是不影响注册域名。点击Click here to go to your Client Area（点击这里进入你的客户区）

（9）查看注册的域名

①点击导航栏的Services（服务）

②再点My Domains（我的域名）会跳转到域名管理页面上

（10）管理域名

在这里会看到你拥有的所有域名，

①点击Mange Domain（管理域名）

②点击Management Tools选择Nameservsers

③选择use custom nameservers（enter below）

④在Nameserver 1处输入deborah.ns.cloudflare.com
⑤在Nameserver 2处输入matias.ns.cloudflare.com

⑥点击Change Nameservers

上面输入的nameserver是CloudFlare的名称服务器。CloudFlare是我遇到的唯一一个不用实名的CDN，而且免费。是下一步会说怎么注册CloudFlare。

六、CloudFlare

CloudFlare是个很好的CDN平台，免费，而且不用实名，可以托管域名，可以pages服务，可以进行一些网站安全防护。注册过程比较简单，下面就简单说一下。

1. 注册CloudFlare账号

（1）戳我直达注册页面

密码的要求：

8 个字符
1 个数字
1 个特殊字符，例如，$、!、@、%、&
无前导或尾随空格
下面有个我愿意偶尔收到有关 Cloudflare 产品、服务和活动的电子邮件更新和特别优惠。我倒是勾了，感觉挺好，有什么关于你域名的消息就给你发来了，特别优惠广告之类的我倒没见过。
现在好像有中文，记得选中文
（2）验证邮箱

到你的邮箱验证一下~

（3）添加刚注册的网站

比如我，我要输入wbza.gq

（4）Cloudflare使用方案

直接点Free！好用还免费。

（5）配置DNS

| Type(类型)| Name(名称) |Content(对应不同类型的内容)|TTL（Time To Live生存时间值）|Proxy status（代理服务器状态）| | ———– | ———– | ———– | ———– | ———– | |A| @|一个IPV4地址|默认是自动|默认是开启CloudFlare| |AAAA|@|一个IPV6地址|默认是自动|默认是开启CloudFlare| |CNAME|@|一个域名|默认是自动|默认是开启CloudFlare| 下面会介绍网站的解析记录 |记录类型的名称|解释| | ———– | ———– | |A记录|服务器的IPV4地址，A记录会告诉DNS，我要去这个IPV4地址| |AAAA记录|服务器的IPV6地址，A记录会告诉DNS，我要去这个IPV6地址| |CNAME|另个域名地址，会访问到目标域名，但还是会显示设置的域名| Name（名称），如果设置@那就是把这个域名指向，比如如果我写@那么代表wbza.gq就会解析到后边指向的地方(这个似乎叫Apex域）
如果在这个空内输入点东西，比如我输入www，那么www.wbza.tk就会通过后边的内容被代理。（也就是一个www子域）
还可以自定义比如我输入dash那么.wbza.tk通过后边的内容。

你需要设置的解析（记录最多需要24小时生效)

|类型|名称|对应不同类型的内容|TTL|Proxy status| | ———– | ———– | ———– | ———– | ———– | | A | @ |185.199.108.153|自动|开启| | A | @ |185.199.109.153|自动|开启| | A | @ |185.199.110.153|自动|开启| | A | @ |185.199.111.153|自动|开启| | AAAA | @ |2606:50c0:8000::153|自动|开启| | AAAA | @ |2606:50c0:8000::153|自动|开启| | AAAA | @ |2606:50c0:8002::153|自动|开启| | AAAA | @ |2606:50c0:8003::153|自动|开启| 下面四个A记录对应的IPV4地址是GitHub Pages帮助文档显示的
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153 下面四个AAAA记录对应的IPV6地址是GitHub Pages帮助文档显示的
2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153 Github Pages帮助文档说的很明了
（6）继续

这一步会让你改nameserver，如果你按照这个教程一步一步走，那么这步是前边做过了的，下一步。

（7）如果你替换了，那么会显示成功

珠玉在前

前言

一、开始

（一） 需要一个GitHub账号

1. 注册

（1）点击右上角的Sign up（注册）

（2）输入一个邮箱并点击Continue（继续）

（3）输入一个密码并点击Continue（继续）

（4）输入一个名字并点击Continue（继续）

（5）选择是否让GitHub通过邮箱给你发送通知

（6）进行人机验证（看你是不是机器）并点击create account（创建账户）

（7）输入邮箱GitHub发来的验证码

二、拉取黄玄先生或者我的模板

（1）点击左上角的输入框

（2）输入Cheong-Szesuen.github.io并按下键盘的Enter或者回车

（3）点击Cheong-Szesuen/Cheong-Szesuen.github.io

（4）点击右上角的Fork

（5）修改Repository name（仓库名）并点击Create fork（创建一个fork）

三、开始部署GitHub Pages

（1）点击上方的Setting（设置）

（2）点击左边的列表中的Pages（页面）

（3）点击Depoly from a branch（从一个分支部署）

（4）点击GitHub Actions

（5）Pages 页面出现下图的样子就是好了

（6）这时候在浏览器的地址栏输入==你的GitHub名字.github.io==就会出现页面

如果出现下面的页面，请检查仓库名或者输入的地址

如何修改仓库名？

（1）点击仓库界面的Setting

（2）点击中间的输入框改完之后点击Rename（重命名）

四、修改

（一）一些工具

1.如何下载Git或GitHub Desktop

2.如何下载Visual Studio Code

a.Windows64位

b.Mac

c.Windows32位

（二）网站的结构

（三）用Git或GitHub Desktop Clone（克隆）下来

GitHub Desktop

1.用刚才fork的账户登录GitHub Desktop（GitHub Desktop是没有中文的，所以得摸索）

3.点击左上角File

4.点击Clone Repository

5.点击Your repositories下显示的你fork的那个仓库

6.可以选择克隆的Local path（本地路径）（注意个本地的文件夹必须是空的）

7.点击Clone（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

6.然后点击Open in Visual Studio Code

7.当完成一整个修改或者写文章的操作，请点击左下角的Summary(required)和Description填写更新信息。

8.并点击Commit to main

9.再点击右方一个蓝色的push origin（可能要多试几次，不稳定，看到蓝色的框不见了，就是好了）

Git

1.Git如何连接GitHub请学习廖雪峰先生的Git教程，简明易懂

1.在本地创建一个文件夹，文件夹不要有任何东西。

2.打开，然后右击在你的本地根目录，右击新建，选择git base here

4.在你刚fork创建的仓库点击一个绿色的Code

5.复制https或者SSH值

6.在刚打开的Git命令行窗口输入下方的命令

7.按下Enter或者回车键（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

8.然后打开文件夹右键通过code打开

（四）修改_config.yml

1.什么是_config.yml?

2.更改

基础设置

社交信息

百度和Google的统计

侧栏

好友（友情链接）

文章标签

PWA渐变式网页软件

Keynote Layout

（五）修改文件

1. 根文件夹下的

（1）index.html文件

（2）about.html文件

（3）archive.html文件

（4）404.html文件

（4）offline.html文件

2. _includes文件夹下的

（1）双文的个人介绍

（2）网站图标

（3）当md文件是双语的时候切换语言时显示的内容

（一）需要一个GitHub账号

（2）输入`Cheong-Szesuen.github.io`并按下键盘的`Enter`或者`回车`

（3）点击`Cheong-Szesuen/Cheong-Szesuen.github.io`

3.点击左上角`File`

4.点击`Clone Repository`

7.点击`Clone`（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

6.然后点击`Open in Visual Studio Code`

7.当完成一整个修改或者写文章的操作，请点击左下角的`Summary(required)`和`Description`填写更新信息。

8.并点击`Commit to main`

9.再点击右方一个蓝色的`push origin`（可能要多试几次，不稳定，看到蓝色的框不见了，就是好了）

4.在你刚fork创建的仓库点击一个绿色的`Code`

7.按下`Enter`或者`回车`键（这一步可能会频繁失败，所以要多试，如果有VPN那更好，记得打开再克隆）

8.然后打开文件夹右键`通过code打开`

(4)搜索`Gooreplacer`，并安装

(4)搜索`Header Editor`，选择后边带有FirefoxBar的版本并安装

(2)在扩展中心打开右上角的`开发者模式`按钮，然后刷新页面，将下载好的两个插件的文件夹直接拖入浏览器

(1)点击右上角的扩展图标，点击`Header Editor`

(2)点击`管理`

(3)点击`导出和导入`

(4)点击`导入`并找到下载的`HE-GoogleRedirect.json`文件

(5)选中`HE-GoogleRedirect.json`，点击`打开`

3. 点击`Your Repositories`

5. 点击`Setting`

6. 点击`Pages`