如何方便且免费地搭建一个属于自己的博客

之前尝试过许多的公共平台写作工具,包括简书,语雀,还有最近才开始的微信公众号。但是在别人搭建的平台下进行写作总是有诸多的限制和缺点。与之相对的,在自己搭建的平台上进行写作就要自由地多,同时也可以有更多的个性化配置。但现在网上的很多搭建博客平台的文章对于入门者来说都太过于复杂,所以我在这里提供了一种基于R包blogdown的搭建博客平台方法,来方便大家快速且免费地搭建自己或者实验室的静态博客网页。

这篇文章主要基于的是统计之都上的用 R 语言的 blogdown+hugo+netlify+github 建博客以及blogdown和bookdown的手册。

总体的思路就是先在Github上创建一个仓库,然后git clone到本地,然后在本地通过blogdown包建立在仓库里面建立一个静态网页,然后再push回Github仓库上,同时在Netlify关联我们的Github仓库,从而通过Netlify来部署我们的网页。这样的好处有几个

  • 我们可以在Rstudio中写markdown甚至Rmarkdown,然后交给blogdown去生成网页,这大大降低了博客写作难度,让你的精力再度专注于写作而不是排版。
  • 基于github仓库可以让你在版本控制的基础上,还可以避免文档数据丢失的风险。
  • 个人感觉Netlify的部署,在国内网络波动的大环境下,要比github pages要快一点,最起码上面的图片国内网络都是打得开的。而且基于github pages建站你一个github账号只能建一个网站,这个方法可以建多个。
  • 这样一套下来全是免费的,甚至你还可以白嫖一个rbind的二级域名。

首先我们需要在github上创建一个仓库,然后再git clone到本地。我这里创建了一个叫testBlog的仓库。 github_repo 如果对git clone到本地不熟悉的话,可以考虑用Rstudio来clone。依次打开File -> New Project -> Version Control -> Git,然后填入你的仓库链接和你想要安装的本地地址。 git_clone 这样就会跳转到你新产生的那个仓库里去了。这时候我们需要先修改一下.gitignore文件,因为有些东西我们是不需要push的。可以打开你仓库里面的.gitignore文件,然后追加这些内容进去。

这些都是益辉大佬博客仓库里面的内容 https://github.com/yihui/yihui.org/blob/master/.gitignore

同时要注意最后一个blogdown,根据netlify build failed to extract shortcode: template for shortcode “blogdown/postref” not found这个issue,应该把blogdown变成/blogdown,否则会部署不成功。

.Rproj.user
.Rhistory
.RData
.Ruserdata
public
static/figures
/blogdown

然后我们再次通过R studio在你仓库里面创建一个本地的网页。不过首先因为我们是基于blogdown包建站,需要先安装blogdown包。

install.packages("blogdown")

安装完了之后,就再通过blogdown包来安装hugo,一个静态网页生成器。

blogdown::install_hugo()

在安装完了上述包之后,就可以利用Rstudio来创建一个本地的网页了。你可以依次打开:File -> New Project -> New Directory -> Website using blogdown,然后就会出现一个界面。这里你有三个地方需要填写,包括你的仓库文件名,路径地址,以及Hugo的主题。在这里我仓库文件名用的是testBlog,即仓库的名字,路径地址写的是F盘下面,Hugo主题我用的是默认的益辉大佬的主题。

blogdownPackage

Hugo theme那里的主题其实就是对应着Github仓库,像图中的yihui/hugo-lithium就是对应着Github上的https://github.com/yihui/hugo-lithium。我shangguandong.rbind.io用的是academic主题,对应的Hugo theme是wowchemy/starter-academic,不过现在已经改名成wowchemy/starter-hugo-academic了。

在你Create Project之后你会发现你本地仓库里面多了很多文件,这些文件就是用来帮助你生成博客的。然后你可以点下Addins的serve site(对应的命令行是blogdown:::serve_site())来查看网页生成效果。这时候你的R studio的viewer就会出现你的网页内容了。

> blogdown:::serve_site()
Launching the server via the command:
  C:/Users/Administrator/AppData/Roaming/Hugo/0.86.1/hugo.exe server --bind 127.0.0.1 -p 4321 --themesDir themes -t starter-academic -D -F --navigateToChanged
Serving the directory . at http://localhost:4321
Launched the hugo server in the background (process ID: 10296). To stop it, call blogdown::stop_server() or restart the R session.

blogdownPackage_1

需要注意的一点是你serve site的时候,不能开全局代理,否则会出现serve不成功的情况。

点击小扫帚旁边的那个按钮,可以在你的默认浏览器中查看生成的网页。 blogdownPackage_2

可以看到在网页中有三篇文章,分别对应着你contente/post文件夹下面的三个文件夹。每个文件夹里面都会有一个index.md。

blogdownPackage_3

如果你尝试修改index.md,同时保存文件的话,你会发现Viewer那一项或者浏览器的网页内容会同步更新。 这个所见即所得的特性在写作的时候非常有用,这可以快速地帮助你发现排版问题,而不用等到最后你生成网页了才能看到文章全貌。这个特性也是我选择用blogdown来写文章的一个重要原因之一。如果你想要写新的内容的话,可以用Addins里面的New Post。需要注意的一点是如果你的title是中文的话,就只能用markdown而不能用Rmarkdown了。

在检查你的博客内容无误之后,你就可以把这个本地仓库push回Github上去了。因为我用的是GitKaren这个Git GUI软件,所以就直接一键无脑地把我本地的仓库push了。对Git熟悉的人也可以用Git bash或者R studio自己的Git栏。

git_push

这时候就会发现你的Github仓库上多了很多东西,这些东西就是本地push过来的。

github_repo_1

在完成了仓库的push之后我们就需要用Netlify去关联我们的Github仓库了。Netlify的网页是 https://www.netlify.com 。你在login的时候可以选择用你的Github账户去登录。然后就是选择图中所示的New site from Git

netlify

这里要注意必须自己设定下 HUGO_VERSION,如果不设定的话,netfily就无法成功部署了12。可以通过blogdown::hugo_version() 来查看自己的hugo版本。下面这张图是我之前的老图了,大家可以填入自己的HUGO版本,不需要填0.79.0。

> blogdown::hugo_version()
[1] ‘0.86.1’

netlify_1

一旦部署成功了,就可以去domain settings那里去修改下你的网站名了,注意这里只能修改前缀,后缀统一都是netlify.app。我这里修改的名字是testblogshang,这样我的网站名字就变成了 https://testblogshang.netlify.app 了 。到目前为止,网页就已经搭建好了。如果你觉得netlify.app太难记,除了自己购买域名之外,还可以考虑去 https://github.com/rbind/support 这个仓库去提issue,申请rbind.io这个二级域名。不过需要注意的是rbind.io这个二级域名似乎没有安全证书,所以用火狐或者chrom打开你自己rbind.io博客的时候会提醒你该网站有风险。

参考


  1. bookdown_book:3.1 Netlify ↩︎

  2. blogdown: Netlify 部署失败,non-zero exist code:255 ↩︎

Guandong Shang
Guandong Shang
PhD Candidate

My research interests include rstats, epigenomics, bioinformatics and evo-devo.