手把手带你搭建个人博客（汇总版）(一)

2022-05-21 407

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 你是不是特别想创建一个自己的私人博客？以及为什么要使用 blogdown 搭建博客？难度是不是很大，和其他搭建博客而言有什么优点？在小编使用过一段时间后，个人认为 blogdown 搭建博客的优势在于，将 Rmarkdown 与 hugo 相结合，再加上 github 和一个可以部署的网站。你可以轻松的将一篇篇 Rmarkdown 的文章自动上传上去。而 Rmarkdown 的优势在于，你的代码结果都可以轻松呈现。而不是“复制粘贴”结果！

简介

你是不是特别想创建一个自己的私人博客？以及为什么要使用 blogdown 搭建博客？难度是不是很大，和其他搭建博客而言有什么优点？

在小编使用过一段时间后，个人认为 blogdown 搭建博客的优势在于，将 Rmarkdown 与 hugo 相结合，再加上 github 和一个可以部署的网站。你可以轻松的将一篇篇 Rmarkdown 的文章自动上传上去。而 Rmarkdown 的优势在于，你的代码结果都可以轻松呈现。而不是“复制粘贴”结果！

如果你还不会 Rmarkdown，那请你先看看文末为你提供的 Rmarkdown 学习大礼包，结合 b 站视频学习效果更佳，有疑问可以在公众号提问，小编愿意为你解答。

本文是小编在学习和使用中记录的一个非常详细的笔记，主要参考：谢益辉的《blogdown: Creating Websites with R Markdown》^[1]，王诗翔的 b 站直播视频^[2](公众号：优雅 R )以及一些 YouTube 视频教程^[3]。

SY`CHK@5LR0E}(}R5MFPTEN.png

本文框架

1. 入门教程

1.1 安装

首先你需要安装 blogdown 包

install.packages("blogdown")

注意：我们的操作是在 Rstudio下进行操作的。

1.2 创建

安装完后，新建一个新的 Project（File-New project），然后选择New Directory。之后鼠标滑到底部，找到 Website using blogdown 并点击进入。

USO41AF]~VO~)I{NCONS@(0.png

创建新的项目

此时进入一下界面，项目名称建议使用英文，目录自行选择。默认情况下 Hugo theme 是谢益辉的模板，这里我将其进行拓展，使用了另一个个人比较喜欢的主题：Fastbyte01/KeepIt，左下角勾选打开新的 session。

注意：为了保证整个演示流程的完整性，小编将其他主题选择教程放到文末作为附加内容。请大家注意我这个演示的逻辑，以免越学越糊涂。并且该教程也是小编在前段时间反复试错得到的。

_C[14$UCS[1}$868U~1YV2O.png

新建界面时的设置

新建后的界面如下，右下角给出了整个项目的文件，其中圈起来的最为关键，我们稍后介绍，先编译下这个初始的 blogdown。

MRDO(~A%1~8JJ{{YB2XYV$Q.png

编译

选择 Tool - addins（windows 更方便找到）然后选择以下按钮。

AW7X`CVSI3MV804%}SWP{86.png

addins 插件

稍等片刻，这时就可以得到最为原始博客模板啦！

如果你做到这，恭喜你！基本已经会 1/3 了！没错就是这么简单。

1.3 模板修改

不同的模板修改起来是不一样的，但是原理类似，如果你知道一些 html 的知识，那可能会更好。如果不会，就慢慢改咯！

使用技巧：改一个地方，报错下，右下角 viewer 会自动编译，你可以根据变化看看是不是你想要的结果（“笨”方法）。

这里以我这个模板为例子：主要修改的是 config.yaml 文件，首先将其打开，得到的界面如下：

~%_2F~B2})25~`X_82S~RFL.png

config.yaml 文件

主要改的是title（4行），subtitle（84行），这时候保存下该文件，右下角即可快速得到以下界面：

RXX6PV$N8}MMS$}MKQMFXTY.png

本地网站

如果你想修改这个头像，可以在该 yaml 文件的第 34 行找到代码 avatar: /images/me/avatar.jpeg。此时从桌面打开该文件夹，更换该 jpeg 文件即可，例如：

D99[A7U}ZB6O0XJSYYC5DVR.png

头像位置

此时如果界面没有更新（可能是 bug），你可以运行一下代码，类似重启一下：

blogdown::stop_server()
blogdown:::serve_site()

90B{%$}4}B%89~P37UUM`WT.png

修改后的blog

1.4 将项目与 github 相连

本地博客基本构建完毕，接下来我们要讲其连接到自己的 github 上，再部署到免费的网站上。

首先先将该文件夹上传到自己的 github 上，你可以使用 Git，但是小编表示不大熟，所以就使用按钮式操作的桌面版本 github 了。

注意：如果你第一次使用 github，以及还没下载 GitHub 桌面版本的小白。你可以通过百度搜索，简单学习下。这里我就不做介绍了（我也不是很会，就不班门弄斧了）

github 桌面版本操作

连接本地的文件夹（zss），按照下面的图片操作。

F0HASM~$[)%D_P0B69]ZINO.png

之后如果出现一下界面，可以按照我做的操作：点击蓝色字

R36H(G~V{M31JQW)}M61KH8.png

跳转到这里的界面，这个将是线上github仓库的名字啥的设置。写好后，就可以创建新的仓库了。

${N24$9_V[5YE$@8Y8{T$(SI.png$

之后将创建好的仓库publish上去。记得将其Keep this code private 的勾取消了（变成公开的仓库）。

]`Z3Y5`VG3UR9T~SV`D3[89.png

查看是否上传

这时候你可以去网上自己的GitHub确认下，是否有这个仓库，我的如下。

69`4$BHY$J[6Y~75GT6ZHH8.png

这时候本地的项目和 github 已经连接好啦！

恭喜你，这时候你已经回了2/3啦！马上就可以拥有自己的私人网站啦！

1.5 使用 Netify 部署网站

这里我使用的 Netify：https://app.netlify.com。当然你也可以使用其他方式进行部署，具体可见 Creating Websites with R Markdown 的第三章节^[4]。

首先是注册啦（这里我已经忘记怎么操作了，因为创建很久了，不过不难，如果进不去可能你需要科学上网）。之后将其与 github 相连接，进入以下界面：

5X`[`O25L7G4YVFQ%NBDQTC.png

点击新建一个 site 来自 Git，之后跟着步骤往下做。点击左下角的 Github，之后选择刚才我们创建的那个仓库（zss）。

ZC[3K`)$[L~UTWSZC$BXHTR.png

之后根据下面的界面进行部署网站。

BTRH)C4{ZZ}0QD`{S68(Y%A.png

这时候，部署需要一些时间，得到下面的界面，你可以通过 Site settings 修改自己的网站名（这里不做演示，很简单）。

稍等片刻得到以下界面，点击网站的链接，即可得到你自己的网站啦！

[U6X}7)S@J]@%MKPA1W_XT9.png

恭喜你，结束啦！你已经会简单创建自己的网站啦！

UA]_F8W2AJ7EPUZ(3AD[RCL.png

当然你可以在前面说的 site settings 重新设定网站的名字，例如我的 demo 网站是：https://zss001.netlify.app/

1KNQ(]STLPXEP`~C]QGCB5A.png

白色版本

U2)X13P5$L0LZ2N~MJL_$EM.png

黑色版本

手把手带你搭建个人博客（汇总版）(一)

简介