更新于2019-10-10
01 前言
本文针对不掌握网页设计或相关开发能力的用户，提供一套高性价比的建立个人博客和作品集的解决方案。具体而言，是作者摸索了WordPress建站，自己写，Github Page建站等各类建站方法后，最终选择的基于「Github Page + 建站技术框架」的建站方法。
如果你并不掌握相关技术，但需要建立一个网站形式的个人博客/作品集，你就是本文的目标读者。通过阅读本文，你能使用小于100元/年的花销，掌握建立和维护一个高质量个人博客/作品集所需要的相关技术和流程。
阅读本文并结合步骤进行操作，视配置情况和网络环境，最快约1小时可以完成网站的配置和上线。当然，由于网络的不稳定性和各种坑的出现，可能会需要数小时的时间才能完成。另外，注意本文基于MacOS系统进行操作，如果需要使用Windows系统进行配置，可以自行百度或谷歌相关步骤的镜像做法。
作者希望通过比较浅显的语言解释清楚必要的概念，如果你作为技术小白无法理解相关描述，可在评论中指出。
本文所采用的基本技术内容如下图。如果你对打了*号以外的内容有一定基础的认知，将会有助于快速完成建站。如果你对此基本不太了解，可以继续阅读下文的相关知识小科普。
主要技术内容
├── 「域名」，如 liyanzhang.com
├── 「Github」和「Github Page」
├── 可用的建站技术框架，本文以Hugo为主
│ ├── 「Jekyll」 (http://jekyllcn.com/)
│ ├── 「Hexo」 (https://hexo.io)
│ └── 「Hugo」 (https://gohugo.io/)
├──「图床」
└── 「Markdown语法」
在理解了每一步骤的目的后再进行操作显然比一步步照着教程走更有帮助，建议大家详细阅读。
网站相关知识小科普
一个所谓的“网站”（以我的个人作品集(https://liyanzhang.com)为例），可以被理解为放在互联网上的一个仓库，一个仓库主要有门和库存两个部分。
1.门：域名
为了方便自己和其他用户找到这个仓库，它需要一个好记的名字或者地址，也就是门。个人博客的地址往往以自己的名字命名，比如我的是liyanzhang.com，它的学名是域名。域名分为很多种，比如.cn结尾的一般是中国的域名，较多不支持国外浏览；比如.com结尾的是国际上最标准的域名；.edu.cn结尾的则是中国的教育机构等等。这也意味着如果你希望你的博客或作品集是全球通用且正式的，建议选购.com/.net等高级域名（相对贵一点）,而日常使用的话，.wiki/.top/.me等域名也是没问题的。除此之外，我们在建站过程中也可能会接触到网站形如“218.108.191.35”的IP地址，它们则是互联网分配给每个用户和每个网络的名称。除非情况特殊，否则我们不会遇到它。
2.https安全协议
而在https://liyanzhang.com中的https又是什么呢？它的学名是超文本传输安全协议，我们只需要知道它是一种安全的用于在网上传输数据的协议就可以了。在这里需要大家了解的一个内容（也是不少人会建站过程中遇到的一个坑）是https与http的区别。http较https少了一个“s”，即“安全”。
下图中分别是我的英文版作品集（https://liyanzhang.com)以及博客（http://oh-eureka.com)，前者是使用本文将为大家介绍的方法构建的，而后者则是之前使用WordPress技术框架构建的，可以发现借助Github Page的一些便利，我们可以免费实现https级别的网站。而一般来说，要在阿里云等服务提供商购买一年的https服务，大概需要2000元左右。使用https的好处是更安全，更完美，更专业。当然，http在我们的日常生活中也是完全够用的。
image.png
接下来，指引大家配置并上线自己网站的初始界面。（也可以跟着GitHub Page自己的指引尝试配置）
- 登录GitHub，点击页面左侧栏“New”按钮，新建一个Repo。
image.png
- 在Repository name处填写“小写用户名.github.io”，比如我的用户名是“Yanzhang-LI”，则我应该填写“yanzhang-li.github.io”。注意一定要完全准确对应，否则该Repo无法作为GitHub Page生效。
image.png
- 点击“Set up in Desktop”。如果没有反应，则在系统上直接打开GitHub Desktop，该Repo应该会显示在界面上，选择您刚建立的username.github.io并点击蓝色按钮Clone它到本地。这意味着你会在自己的电脑上拥有一个以username.github.io为名字的文件夹。当你更改文件夹里的文件时，GitHub Desktop会检测到你的更改，而你可以commit并push到GitHub上。
image.png
image.png
- 打开Visual Studio Code，使用快捷键Command/Ctrl+N或点击“New file”新建一个文件。使用快捷键Command/Ctrl+S保存该文件，注意：将该文件命名为index.html，并保存至刚刚建立的以username.github.io为名字的文件夹中。index.html是GitHub Page解析网页时，会首先解析的主页。
- 将以下html5代码复制进index.html，随后再次使用Command/Ctrl+S保存。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
- 打开GitHub Desktop，它应当会自动出现你对文件所做的更改。确认左侧栏全选后，在红色输入框内输入任何你想用来标记这次更改的话，比如“第一次commit”，随后点击下方蓝色按钮“Commit to master”，此时已经完成了标记工作。最后我们点击上方栏最右的“Publish branch”将该变更发布到GitHub上，等待完成。
image.png
- 在浏览器中输入https://你的用户名.github.io，看看你最开始网页的效果吧！
- 如果没有任何反应，请等待几分钟。如果还是没有内容，请在github.com上检查你的username.github.io的Repo中是否有一个index.html文件，同时文件中的代码是否如前文所述。
- 如果一切顺利，此时你的github page就已经配置完成了。如果你会撰写一些前端代码，你已经可以在username.github.io上浏览你的更新。
通过上面的操作，你应该能够理解本地的“username.github.io文件夹”和“GitHub Page”间的关系。本地的文件夹中的内容一旦发生改变，就可以通过GitHub Desktop进行commit（打点记录改变），再push到GitHub云端。经过这样的操作，云端的GitHub仓库代码和本地的username.github.io文件夹的内容就一致了。而再经过GitHub Page的渲染，我们就可以使用域名访问我们的个人网站了。
截至目前，我们其实已经拥有了一个名为username.github.io的网站了。但显然这样的域名并不够酷，所以我们将会再花几分钟配置好域名。配置域名的原理是通过将username.github.io“解析”到你所购买的域名，解析的具体含义我们不必了解，总之，以后你既可以通过username.github.io，也可以通过你所购买的域名访问这个网页。
- 在GitHub上进入你的username.github.io的Repo，进入其设置。
image.png
- 找到GitHub Pages设置，在“Custom domain”中输入你所购买的域名，点击Save。
image.png
- 进入阿里云-登录-控制台-域名，找到你购买的域名或你需要与username.github.io绑定的域名，点击“解析”。
image.png
- 点击“添加记录”，共需要添加两次记录。记录类型都选择“CNAME”，主机记录第一次填写“www”，第二次填写“@”，解析线路均选择默认，记录值均填写“你的用户名.github.io”。
image.png
image.png
解析结束后等待数分钟，尝试在浏览框中输入你的域名，如果可以顺利访问则解析成功。
3.2 配置Hugo和Hugo主题 （40分钟）
要使用Hugo来安排我们的网站，我们首先要在我们的电脑本地配置Hugo技术框架。下文以Mac系统为例，Windows系统请百度镜像做法，如“win 安装hugo”。
- 在电脑本地安装Homebrew
- 点击进入https://brew.sh/index_zh-cn
image.png
- command+c复制路径，打开应用程序里的“终端（terminal）”，将指令command+v粘贴后回车。
image.png
b. 出现上图语句后回车，输入Password（电脑密码），注意输入时不会有任何反应，输入完毕按下回车后如果进程顺利则输入正确，否则重新输入。
image.png
c. 出现上图文字表示安装成功。
- 在电脑本地安装Hugo
- 打开“终端”应用程序，输入
brew install hugo - 按照指令操作，等待安装进程结束
- 结束后，输入
hugo version如果出现了版本号，则说明安装成功
Hugo安装完毕后，请在https://themes.gohugo.io / GitHub / Google上寻找适合你的个人博客/作品集的网站模板。选定模板后，再进行主题的配置和发布。
随便列举一些能看得过去的主题：
- https://themes.gohugo.io/kross-hugo-portfolio-template/
- https://themes.gohugo.io/hugo-myportfolio-theme/
- https://themes.gohugo.io/yourfolio/
- https://themes.gohugo.io/forty/
- 配置Hugo主题
所谓的主题，就是别人给我们写好的了一套网页样式，包括主页、文章、图片等各类内容的样式，因此我们只需要注重内容的生产。一般来说，我们可以替换主题中文字和图片的内容，如果对css等语言有一定了解的同学，可以修改模块的具体样式（形状、颜色、比例等）。在上文可以看到，Hugo等框架为我们提供了大量的主题，我们需要首先配置好Hugo和Hugo主题，再将它发布到GitHub Page上即可。接下来以我选用的hugo-forty主题为例，解释主题的配置。
其流程大致为：本地新建Hugo Website -> git clone主题文件 -> 在本地修改你的网站 -> 发布到GitHub Page
**
- 在本地任意一个你喜欢的地方，比如“文稿Documents”路径下，新建一个文件夹，可以命名为my website。
-
在应用程序（或使用快捷键command+空格搜索）找到“终端Terminal”并打开，输入“cd”后再输入空格，再用鼠标拖动my website文件夹至终端中，直到终端中的命令变为“cd 文件夹的路径”，按下回车。该操作使得终端进入了my website文件夹，我们将要在该文件夹中进行一系列指令操作。
image.png
image.png
-
在终端中输入指令“hugo new site my-website”其中的"my-website"可以替换为任何连续的文件夹名称，如“yanzhang-portfolio”等，完成后将出现一个以此为名称的新文件夹，里面已经有好几个文件夹和文件了。
image.png
- 在终端中输入指令"cd 你刚刚写的文件夹名称"，如"cd my-website"，随后再输入"cd themes"。
- 成功进入后，输入"git clone https://github.com/MarcusVirg/forty"，具体的指令因为主题的不同也会不同。等待下载完成，如果网络不好可能会崩掉，重来即可，最好使用翻墙网络。这几步的含义是将存放于github上的主题文件下载到我们电脑本地上，这样我们的hugo网站就拥有了主题。后面，我们将在本地对我们的Hugo网站进行内容修改，最后发布到GitHub上，我们就可以通过域名访问了。
image.png
-
完成下载后，进入themes文件夹，里面将出现forty文件夹，进入themes/forty/exampleSite，复制里面的config.toml文件到最开始的my-website文件夹中，替换原来的config.toml文件。
image.png
image.png
- 重新打开终端，输入"cd "（注意有空格）后拖拽my-website文件夹的路径到终端中，回车后进入到my-website文件夹下，输入"hugo server"并回车，出现如下图所示则成功。最后，打开浏览器，在路径框内输入"http://localhost:1313/"。如果出现了样式正确的样板网站页面，则配置成功。在终端窗口被激活的状态下按下control+c组合键，终止该预览。
image.png
image.png
image.png
配置部分到此就结束了。接下来，将会进一步完成图床的配置工作，并在 04 维护 部分中介绍配置网站的具体方法。
3.3 配置图床 （20分钟）
我们使用七牛云图床或腾讯云图床和iPic来配置图床，win系统请使用picGo等软件。
注意，由于七牛云规则变更，免费测试的七牛云图床存储空间仅在30天有效，如果需要永久有效的图床，需要拥有一个已经完成备案的域名（注意备案不等于实名认证），备案需要超过1周的时间，较为麻烦。我个人使用了自己备案的域名，也建议大家给自己的域名备案。
如果不想这么麻烦，可以换用腾讯云来配置，相关步骤非常类似。
具体可见https://blog.csdn.net/u012195214/article/details/79204607。
附上iPic官方的配置说明：https://toolinbox.net/iPic/。
配置完成后，如何在markdown语法中使用，请百度markdown语法进行学习。
04 维护
在这一部分，我将会介绍一个典型的Hugo网站文件夹中的各个文件的作用，以及我们将如何配置他们。在此处，还是以前文的Forty主题为例，对于大多主题是通用的。
刚完成配置的Hugo文件夹
├── config.toml 总配置文件，可以在里面更改各类配置
├── archetypes 不必理会
│ └── default.md
├── content 存放文章内容的文件夹，可以在里面新建不同类目的文件夹
│ ├── blogs
│ │ ├── blog0917.md
│ │ └── ... 你的其他文章
│ ├── works
│ └── ... 你的其他分类
├── data 不必理会
├── layouts 不必理会
├── resources 不必理会
├── static 用于存放你在content中的文章会用到的图片等资料
├── public 完成配置后，生成出来的网站会被放到这里
└── themes
└── forty 你选择的主题名称
├── archetypes 不必理会
├── exampleSite 完成初始化配置后不必理会
├── images 不必理会
├── layouts 不必理会
└── static 各类配置文件
├── css css文件，可以修改代码以更改样式
├── img 用于存放主页会用到的图片等文件，如banner.jpg
├── js 不必理会
├── sass 不必理会
└── fonts 不必理会
在上面，我初步解释了每个文件夹的作用。我们主要会涉及到 config.toml文件，content文件夹，static文件夹，public文件夹，themes/forty/static文件夹这几个内容的修改，接下来逐一详细介绍。
- config.toml
config意为配置，.toml是一种数据格式。该文件根据不同的主题会有所不同但总体上类似。在这个文件里，可以定义网站的名称，各个地方的文字、图片、结构等等。具体的描述，使用Visual Studio Code打开文件后，里面会有相应的说明。也可以实时修改后在本地预览网页时实时查看（具体方法见后文）。
- content文件夹
里面放有你的博客和文章/作品，以markdown文件形式存在。每个文件的头部会有一些属性需要配置，随后就可以使用正常的markdown语法进行写作。
- static文件夹
在里面存放着文章的封面等会被用到的图片资料，可以在content中的markdown文件中以路径形式取用。
- public文件夹
当在本地结束配置后，在终端中使用"hugo"指令，网站的内容将被生成到public文件夹。该文件夹的内容应该被复制黏贴到本地的GitHub Page文件夹（username.github.io文件夹）并上传到GitHub。
- themes/forty/static文件夹
和static文件夹类似，只不过这里面是与主题有关的所有文件，包括css，js，图片等。如果了解代码原理，可以在这里进行配置修改。
维护和发布流程
- 在“终端”中，使用前文提到的 “cd + 空格 + 路径”的形式进入到你的hugo网站文件夹（如my-website文件夹）。
- “终端”输入“hugo server”指令，成功后在浏览器进入localhost:1313，本地预览网站。
- 修改前文提到的各类文件或其他markdown文件，在浏览器中查看效果。
- 修改完毕后，回到“终端”，按快捷键ctrl+c停止本地预览。输入指令“hugo”。
- 前往hugo网站文件夹中的public文件夹，复制里面的所有文件到GitHub Page文件夹(username.github.io文件夹)。
- 打开GitHub Desktop，监测到多个文件被改变。Commit后push到云端，稍等2分钟，在网页上输入你的域名查看是否更新成功。
至此，你已经了解了如何创建、配置并维护你的个人网站，恭喜！
本文更新于2019年9月，如有任何错漏或谬见，敬请谅解与告知，感谢！
网友评论