如何零编程高性价比建立个人博客/作品集(详细教程)

更新于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在我们的日常生活中也是完全够用的。

域名1.png

image.png

http协议的网站会被标为“不安全”

3.仓库：服务器

在浏览器输入框输入“门牌号”域名后，我们会进入到一个个网站的仓库里，我们可以简单地把这些仓库理解为服务器。这些仓库存在2种状态。状态一是“渲染”后的状态，也就是我们正常进入网页时看到的一个个漂亮的页面。但显然这些网页不是像一幅幅图片一样被摆在仓库里的，而是以状态二：“源代码”形式存在的。按理来说，一个基础的网页开发，我们需要学习html5，css3，javascript等语法才能够写好，并在浏览器上渲染好。但通过使用一些别人为我们建设好的技术框架，我们只需要像写文章一样写好内容，放到对应的文件夹里，或者是修改一个已经非常整洁明了的配置文件，就可以在网络上看到渲染后的结果。这也是这些技术框架的意义。
因此，如果不满足于简单地构建和维护网站，可以自行百度或谷歌html5，css3的相关内容学习，大概2天时间便可以上手。
另一方面，在根据后文完成了所有的配置工作后，我们维护网站的流程是：

image.png

建站相关知识小百科

通过前文的介绍，相信你对一个“网站”的构成，也就是它的门和仓库，有了一定的了解。下文将为大家简单介绍几种主流的建站方式和适合的用户。

1. 域名+WordPress/Cargo/Wix等自带服务器建站

优点：美观，定制化程度高，可以使用富文本编辑器编辑，易于维护
缺点：基础费用较高（¥200+～¥800+/年不等，越好看越贵），需要较快访问速度和储存容量时费用更高
总结：有钱就不用想了，这个走起

2. 域名+GitHub Page建站

优点：免费，快速
缺点：网站样式和结构较为单一（丑陋），维护不够方便，无法监控网站数据
总结：既然都用GitHub Page了，干啥不再多搞一下呢？

3. 域名+GitHub Page+Hugo/Hexo/Jekyll等技术框架建站

优点：免费，快速，定制化程度尚可，较为美观，维护不困难
缺点：不够方便，定制化程度还是不够高
总结：相对性价比最高的选择

再解释一些撰写博客需要了解的相关概念：

• 图床：在个人博客/作品集中显示的大量图片如果都直接放在“仓库”里，这个仓库的容量可能会不足，同时，读取仓库的内容的速度可能也不够快。因此，有一些公司（如七牛云），提供了专用的“仓库”来存放图片或文件。通过将几十kb到几m的图片/文件存放到这些专用的仓库里，再在我们的网页中使用一行专门用于显示图片的代码，即可不占用我们的仓库库存，同时又快速显示图片。具体的配置将会在下文介绍。
• Markdown：一种流行的用于撰写互联网通用文章的语法。在我们写文章时，往往会用到一级标题、二级标题、加粗、斜体、显示图片、图表、代码块等等各种特殊格式。Markdown语法使得我们可以使用这种语法撰写文章后，可以轻松地发布到互联网支持MD的各种平台（个人博客//语雀/公众号/知乎...)而不再需要每次都为每个平台进行排版。具体来说，比如我们需要撰写一个一级标题 标题1，可以写作：“# 标题1”。具体的语法可以自行百度，希望大家在撰写博客的练习中不断熟悉。在后文提到的Visual Studio Code中使用MarkDown写作，可以直接进行带格式的预览，如下图。在图中可以看到，形如 [图片上传失败...(image-2ee8ec-1569079407627)] _ _的形式可以使用图床显示图片。

image.png

02 材料准备

2.1 购买域名（10分钟）

如果你已经拥有一个域名并已完成备案，可直接查看下一条。
我们使用阿里云购买一个你喜欢的域名。

1. 前往https://www.aliyun.com/，点击右上角登录，使用支付宝扫码直接登录。
2. 在顶部搜索框选择“域名”，在输入框输入你想要的域名，比如nidemingzi，点击搜索

image.png

3. 查看结果，选择你能够接受的域名，或更换关键词。一般来说，建议选用.com/.cn/.net/.io结尾的域名。如果不幸域名已被注册，建议更换关键词或尾缀，因为委托购买价格较高。

image.png

4. 不需要添加任何其他服务，域名持有者选择“个人”，按照要求完善信息。可以查看阿里云自行提供的“如何获取优惠口令”获得一点点的优惠。

image.png

5. 购买后，直接进入域名控制台，或通过页面右上角“控制台”-页面左侧侧边栏“域名”进入域名控制台，如下图。

image.png

6. 你购买的域名应该会出现在页面中，但在部分属性状态上与我会不同。
7. 如果“域名状态”或页面中任何区域显示域名需要进行“备案”，则请按照阿里云的指引进行域名备案。备案是必须的，视不同情况可能会在30min内完成，也可能确实需要3-5天。

备案完成后，域名就完成准备啦！

2.2 GitHub准备（15分钟）

如果你已经拥有一个GitHub账号，并掌握了push/commit等指令或了解如何使用GitHub Desktop，可直接查看下一条。
GitHub (https://github.com)是世界范围内最大的男性交友平台代码托管平台。由于程序员写的代码和项目不仅多，而且还会不断地进行增、删、改，必须要有一个在云端的平台为大家管理这些代码。通过GitHub，程序员可以在自己的电脑上写代码（就像我们将做到的在自己的电脑上的文件夹里编辑文件），再上传发布到GitHub上。通过我们的标记操作（输入一些指令），GitHub会记录下我们更改文件的操作，以便我们后悔更改后直接服用“后悔药”恢复文件至某一版本。当然，在我们搭建网站和维护的过程中，几乎不需要用到任何复杂的操作，只需要修改文件后发布到GitHub上即可。

1. 进入github.com, 输入自己喜欢的用户名，自己的Email和Password，检测没有重复后即点击Sign up for GitHub完成注册。可能会收到激活邮件。

image.png

2. 进入GitHub后，界面如下图所示。左侧为你已经建立的一些“项目”，中间会出现你关注的内容，右侧则是一些动态。

image.png

3. 点击https://desktop.github.com/，下载GitHub Desktop客户端，方便我们管理本地的仓库。
4. 完成安装后双击打开，登录注册好的GitHub账号。

image.png

登录完成后，即完成准备！

2.3 其他软件准备（5分钟）

1. 下载 Visual Studio Code（https://code.visualstudio.com/），用于编写我们的文档。它是一款轻量强大的代码编辑器。

image.png

2. 在App Store下载iPic，用于上传文章中的图片到图床上。下载后安装即可，配置将在后文交代。

image.png

03 具体配置

3.1 配置GitHub Page（15分钟）

GitHub Page是一种由GitHub中的Repository（仓库/项目）直接创建的网页。传统的网页需要拥有一个独立的服务器，往往需要另外购买，价格虽然不贵，但管理十分困难。相比之下，GitHub Repository的管理则非常简单，使用前文介绍的GitHub Desktop甚至不需要记忆任何指令。按照数百万人都在用的GitHub管理模式，我们在本地编辑Repo中的内容，上传到GitHub上，则GitHub Page也能够对应更新。

image.png

接下来，指引大家配置并上线自己网站的初始界面。（也可以跟着GitHub Page自己的指引尝试配置）

1. 登录GitHub，点击页面左侧栏“New”按钮，新建一个Repo。

image.png

2. 在Repository name处填写“小写用户名.github.io”，比如我的用户名是“Yanzhang-LI”，则我应该填写“yanzhang-li.github.io”。注意一定要完全准确对应，否则该Repo无法作为GitHub Page生效。

image.png

3. 点击“Set up in Desktop”。如果没有反应，则在系统上直接打开GitHub Desktop，该Repo应该会显示在界面上，选择您刚建立的username.github.io并点击蓝色按钮Clone它到本地。这意味着你会在自己的电脑上拥有一个以username.github.io为名字的文件夹。当你更改文件夹里的文件时，GitHub Desktop会检测到你的更改，而你可以commit并push到GitHub上。

image.png

image.png

4. 打开Visual Studio Code，使用快捷键Command/Ctrl+N或点击“New file”新建一个文件。使用快捷键Command/Ctrl+S保存该文件，注意：将该文件命名为index.html，并保存至刚刚建立的以username.github.io为名字的文件夹中。index.html是GitHub Page解析网页时，会首先解析的主页。
5. 将以下html5代码复制进index.html，随后再次使用Command/Ctrl+S保存。

Hello World
I'm hosted with GitHub Pages.

6. 打开GitHub Desktop，它应当会自动出现你对文件所做的更改。确认左侧栏全选后，在红色输入框内输入任何你想用来标记这次更改的话，比如“第一次commit”，随后点击下方蓝色按钮“Commit to master”，此时已经完成了标记工作。最后我们点击上方栏最右的“Publish branch”将该变更发布到GitHub上，等待完成。

image.png

7. 在浏览器中输入https://你的用户名.github.io，看看你最开始网页的效果吧！
8. 如果没有任何反应，请等待几分钟。如果还是没有内容，请在github.com上检查你的username.github.io的Repo中是否有一个index.html文件，同时文件中的代码是否如前文所述。
9. 如果一切顺利，此时你的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，也可以通过你所购买的域名访问这个网页。

1. 在GitHub上进入你的username.github.io的Repo，进入其设置。

image.png

2. 找到GitHub Pages设置，在“Custom domain”中输入你所购买的域名，点击Save。

image.png

3. 进入阿里云-登录-控制台-域名，找到你购买的域名或你需要与username.github.io绑定的域名，点击“解析”。

image.png

4. 点击“添加记录”，共需要添加两次记录。记录类型都选择“CNAME”，主机记录第一次填写“www”，第二次填写“@”，解析线路均选择默认，记录值均填写“你的用户名.github.io”。

image.png

image.png

解析结束后等待数分钟，尝试在浏览框中输入你的域名，如果可以顺利访问则解析成功。

3.2 配置Hugo和Hugo主题 （40分钟）

要使用Hugo来安排我们的网站，我们首先要在我们的电脑本地配置Hugo技术框架。下文以Mac系统为例，Windows系统请百度镜像做法，如“win 安装hugo”。

1. 在电脑本地安装Homebrew
2. 点击进入https://brew.sh/index_zh-cn

image.png

1. command+c复制路径，打开应用程序里的“终端（terminal）”，将指令command+v粘贴后回车。

image.png

b. 出现上图语句后回车，输入Password（电脑密码），注意输入时不会有任何反应，输入完毕按下回车后如果进程顺利则输入正确，否则重新输入。

image.png

c. 出现上图文字表示安装成功。

2. 在电脑本地安装Hugo
3. 打开“终端”应用程序，输入 brew install hugo
4. 按照指令操作，等待安装进程结束
5. 结束后，输入 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/

3. 配置Hugo主题

所谓的主题，就是别人给我们写好的了一套网页样式，包括主页、文章、图片等各类内容的样式，因此我们只需要注重内容的生产。一般来说，我们可以替换主题中文字和图片的内容，如果对css等语言有一定了解的同学，可以修改模块的具体样式（形状、颜色、比例等）。在上文可以看到，Hugo等框架为我们提供了大量的主题，我们需要首先配置好Hugo和Hugo主题，再将它发布到GitHub Page上即可。接下来以我选用的hugo-forty主题为例，解释主题的配置。
其流程大致为：本地新建Hugo Website -> git clone主题文件 -> 在本地修改你的网站 -> 发布到GitHub Page
**

1. 在本地任意一个你喜欢的地方，比如“文稿Documents”路径下，新建一个文件夹，可以命名为my website。

2. 在应用程序（或使用快捷键command+空格搜索）找到“终端Terminal”并打开，输入“cd”后再输入空格，再用鼠标拖动my website文件夹至终端中，直到终端中的命令变为“cd 文件夹的路径”，按下回车。该操作使得终端进入了my website文件夹，我们将要在该文件夹中进行一系列指令操作。

   
   
   image.png
   image.png

3. 在终端中输入指令“hugo new site my-website”其中的"my-website"可以替换为任何连续的文件夹名称，如“yanzhang-portfolio”等，完成后将出现一个以此为名称的新文件夹，里面已经有好几个文件夹和文件了。

   
   
   image.png
4. 在终端中输入指令"cd 你刚刚写的文件夹名称"，如"cd my-website"，随后再输入"cd themes"。
5. 成功进入后，输入"git clone https://github.com/MarcusVirg/forty"，具体的指令因为主题的不同也会不同。等待下载完成，如果网络不好可能会崩掉，重来即可，最好使用翻墙网络。这几步的含义是将存放于github上的主题文件下载到我们电脑本地上，这样我们的hugo网站就拥有了主题。后面，我们将在本地对我们的Hugo网站进行内容修改，最后发布到GitHub上，我们就可以通过域名访问了。
   image.png

6. 完成下载后，进入themes文件夹，里面将出现forty文件夹，进入themes/forty/exampleSite，复制里面的config.toml文件到最开始的my-website文件夹中，替换原来的config.toml文件。

   
   
   image.png
   
   
   image.png
7. 重新打开终端，输入"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，图片等。如果了解代码原理，可以在这里进行配置修改。

维护和发布流程

1. 在“终端”中，使用前文提到的 “cd + 空格 + 路径”的形式进入到你的hugo网站文件夹（如my-website文件夹）。
2. “终端”输入“hugo server”指令，成功后在浏览器进入localhost:1313，本地预览网站。
3. 修改前文提到的各类文件或其他markdown文件，在浏览器中查看效果。
4. 修改完毕后，回到“终端”，按快捷键ctrl+c停止本地预览。输入指令“hugo”。
5. 前往hugo网站文件夹中的public文件夹，复制里面的所有文件到GitHub Page文件夹(username.github.io文件夹)。
6. 打开GitHub Desktop，监测到多个文件被改变。Commit后push到云端，稍等2分钟，在网页上输入你的域名查看是否更新成功。

至此，你已经了解了如何创建、配置并维护你的个人网站，恭喜！
本文更新于2019年9月，如有任何错漏或谬见，敬请谅解与告知，感谢！

参考文献

1. https://www.jianshu.com/p/0997d0d15e55
2. https://pages.github.com/
3. https://gohugo.io/documentation/
4. https://yunxi177.github.io/posts/hugoinstall/