不会代码，如何零成本搭建个人博客？

文 / 一周进步 · 安哥拉

自微信推出公众号后，无论是博客时代就开始写作的人，还是后来有志于投身新媒体的人，都纷纷注册了自己的账号。

公众号首创的原创保护和赞赏机制，让它成了许多内容生产者喜爱的一个平台。

但如果你经常使用公众号，可能会发现它也存在一些限制：不能跳转到外部链接、新开的公众号没有留言功能等。

而这些限制，对于博客来说，是不存在的。

即便博客时代已经远去，但如果你还想写博客，想体验一下像工程师输入第一行代码Hello World的感觉，那么，从此刻开始，动手搭建一个自己的博客，还是值得的。

注：本文适合无代码基础的小白选手，因为我也是从零开始学起的。

     

01.博客最终效果

在说如何搭建博客之前，我们先来看一下我搭建的博客：

目前首页有两篇文章，内容有些单薄，但页面整体设计得比较简洁，是我喜欢的类型。如果你对这个页面不太满意，还可以使用其他的博客主题，更换主题也非常方便。

下图是博客文章的内页，两侧留白设计，文字的大小和行间距设置得比较合理，阅读的时候看起来也比较舒服。

    

博客在手机上也进行了很好地适配，想要了解博客在手机上的阅读体验，可点击文章底部的 {阅读原文} 。

02.搭建博客的前期准备

① 注册Github账号

打开Github官网，使用邮箱注册Github账号，注册时请谨慎设置自己的用户名，因为用户名后面会成为博客域名的一部分。

      

获得了Github账号后，点击左侧的Create a repository，创建一个仓库，用于存放博客的相关数据。

在设置仓库名称时，它的格式是固定的，采用「用户名.github.io」的格式，因为这个仓库名称就是博客的域名(地址)。

如下图，我的用户名为angola95，因此仓库名为「angola95.github.io」。

设置好仓库名称后，勾选Initialize this repository with a README，最后点击底部的Create repository，就完成了仓库的创建。

创建好仓库后，点击右上方的账号头像，选择Settings。

      

在设置菜单中，按照Developer settings--Personal access tokens的路径进入，点击右上方的Generate new token。

    

在New token设置页面，Note输入对Token的描述或备注，勾选下方的repo。

      

最后将页面拉至底部，点击Generate token，就会生成一串由数字和字母组成的字符，这就是刚刚生成的Token。

有的小伙伴可能会问，这个生成的Token有什么用？请接着往下看，你可能就明白了。

     

② 安装Git

Git是一个分布式版本控制软件，方便多个开发者同时为一个项目贡献代码，彼此间互不影响，大大提高了团队合作的效率。

Git的数据库分为远端数据库和本地数据库，我们在Github上创建的仓库，可以看成是博客的远端数据库，而本地数据库就是我们使用的电脑。

使用Git，能将我们在本地电脑写的博客内容，自动地推送到远端的Github上，而连接本地和远端数据库的桥梁，就是前面生成的Token。

     

Git支持Win、macOS和Linux三大平台，下载之后，它的安装方法与普通软件一样，更换软件安装位置之后，一直点击下一步，直至开始安装。

Git下载地址：

https://git-scm.com/downloads

③ 安装博客写作客户端

Gridea是一个静态的博客写作客户端，它提供了免费和收费的博客主题，通过应用不同的主题，可以让原本简陋的博客更有设计感。

      

安装了Gridea后，需要先进行一定的配置。

在配置页面中，Platform选择Github Pages，分支填写master，其他选项则根据个人信息进行填写。

     

填写好信息，先点击保存，接着点击检测远程连接，查看是否连接成功。

若提示远程连接失败，解决方法可参考Gridea官方给出的文档：

https://dwz.cn/K9DdtABB

Gridea下载地址：

https://gridea.dev

03.开始写第一篇博客

完成上面的工作后，就算完成了博客的搭建，接下来你就可以开始写自己的第一篇博客了。

① Markdown语法

发布博客前，你需要有一个编辑器来写博客，Gridea中内置了文本编辑器，采用的是Markdown标记语言，而非我们平常使用的Word那种富文本格式。

相比富文本格式，Markdown有一个最大的优点：

让人更关注写作本身，而不是关注排版。

使用Word写作时，经常会花费较多时间在排版上，而Markdown足够简单，去除了Word内置的冗余样式，选择少了，你也没必要纠结于使用哪种样式。

     

虽说Markdown是一种标记语言，但你不需要被「语言」这两个字吓到，因为它并不算是编程语言，学起来也非常简单，至多10分钟就可以完全掌握。

在文字最前面加三个#号，就表示标题三的样式；在文字前后各加两个星号，相当于对文字进行加粗。

       

*左边是Markdown编辑窗口，右边是预览窗口

关于Markdown的更多常用标记语法，请自行上网搜索。

② Markdown编辑器

Gridea自带的Markdown编辑器，不能同时并排显示编辑窗口和预览窗口，想要实时预览效果，就需要频繁点击右侧的预览按钮，这大大降低了码字效率。

     

为了能实时预览效果，我建议使用可实时预览效果的外部Markdown编辑器，如马克飞象和Typora等。

马克飞象，是印象笔记推出的在线Markdown编辑器，只要有网络，你就能随时开始写作。

此外，由于马克飞象和印象笔记是同一家公司的产品，通过绑定印象笔记账号，就能实时将内容保存到印象笔记中，这也间接实现了内容在多个平台间的同步。

    

马克飞象在线地址：

https://maxiang.io/

Typora，是一个免费的Markdown客户端软件，支持Win、macOS和Linux三个平台。

Typora虽然没有马克飞象并排的实时预览窗口，但它也是所见即所得的，输入Markdown的标记符号后，就能马上看到最终的效果。

       

使用Markdown写文章，有时需要将文章发送给他人查看，若对方没有用过Markdown，你直接发送一份Markdown文件过去，会让别人一脸懵逼，也不便于多人间的协作。

而Typora也为我们考虑到了这一点，在导出中，有多种文件格式可以选择，如最为常见的PDF、Word和图片。

       

Typora下载地址：

https://www.typora.io/#download

③ Markdown图床

在Markdown中，使用的图片都是通过链接的形式添加到文章中的，下图中的图片就是使用https开头的链接引用到Markdown中的。

      

图片通过链接进行引用，这就需要我们先将图片上传到服务器中，在网上用于存放图片的服务器，叫做「图床」。

若你觉得图床比较陌生，也可以将图床理解为网络相册，如QQ空间相册、微博相册等，我们发布在QQ或微博的照片，其实就是存放在了腾讯和新浪的服务器上。

网络上的图床有免费和收费两种，为最低成本地搭建一个博客，我选择使用免费的图床，而这个图床刚好就是文章最开始提到的Github。

④ 图片上传工具PicGo

为方便将电脑本地的图片上传到Github，我们需要安装一个图片上传工具——PicGo。 

使用PicGo上传到Github的图片，它会返回图片对应的链接，接着你将链接粘贴到使用Markdown写的博客中，图片就可以正常显示了。

PicGo是由一位个人开发者@PiEgg 开发的免费图片上传工具，支持Win、macOS和Linux三大平台。

       

安装了PicGo后，需要先对软件进行一定的设置：

点击图片上传右下角的箭头，选择Github图床。

      

点击左侧边栏的图床设置，选择Github图床，进入Github图床的设置界面。

在Github设置中，需要填写的信息有仓库名、分支名和Token等，这些信息在提示我们得去Github新建一个用作图床的仓库。

     

下图是我新建的用作图床的仓库，创建方法与前面介绍的创建仓库操作基本一致，这里不再赘述。

     

创建好图床的仓库后，我们还需要创建一个新的Token，用于连接PicGo与图床仓库，创建Token的方法，前面也有介绍过。

完成新仓库和Token的创建后，我们回到PicGo的配置界面，按照下图填入相关信息。

     

*对上图的说明：

仓库名：格式为 Github用户名/仓库名；

分支名：设置为 master；

设定自定义域名：格式为https://raw.githubusercontent.com/Github用户名/仓库名/master，前面的部分都是固定的，后面的Github用户名和仓库名根据个人情况进行替换。

完成以上设置后，点击下方的确定按钮，若配置的信息正确，在Win10系统右下角会弹出设置成功的通知。

      

返回到PicGo的上传区，将你想上传到的图片拖拽到上传区，待图片完成上传，软件会在桌面右下角弹出上传成功的通知。

通知附带了图片上传到Github的链接，点击通知面板，就会将链接保存到复制到系统的剪贴板中。

     

此时再回到Typora，将剪贴板中的图片链接粘贴到文章中，就完成了博客图片的添加。

 

PicGo下载地址：

https://dwz.cn/sNQWdAfG

04.发布你的第一篇博客

至此，完成了前面较为繁琐的操作后，你就可以正式发布自己的第一篇博客了。

在博客客户端Gridea中，点击左下角的预览按钮，可以预览保存在本地的博客，预览后未发现问题的话，就可以点击下方的同步按钮，将保存到本地的博客推送到Github上。

      

完成同步后，在浏览器中输入最开始创建的仓库的名称，由于最开始我将仓库名称设置为angola95.github.io，因此在浏览器输入这个地址，就能打开我的个人博客了。

     

05. 写在最后

使用本文介绍的方法搭建博客，有两个好处：

一是不需要花时间学习搭建博客所需的技术，对新手比较友好；

二是搭建的博客完全免费，不需要担心服务器到期访问不了。

当然，这个方法也存在一些不足：由于Github是个国外的网站，若博客中添加的图片过大，加载的时间会延长。

对比了这个方法存在的利弊，我最终还是选择了它。

除了本文介绍的搭建博客的方法，网上还有很多其他方法，感兴趣的小伙伴可以自行搜索。

以上，就是本次想和你分享的零基础零成本搭建博客的方法。

希望对你有帮助，我们下次见。