R沟通|使用 Blogdown 构建个人博客

简介: 你是不是特别想创建一个自己的私人博客?以及为什么要使用 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]。见一下最后的结果demo:

1ZJ8GSCZF9_1%N9O_5Z}3)0.png


入门教程


安装

首先你需要安装 blogdown 包

install.packages("blogdown")

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


创建

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

(OG{YJ6`921(I}P_9X~WI$R.jpg

image.gif创建新的项目


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

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

[_W)[BBTT4W@VF88UVMCFRT.png

新建界面时的设置


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

_`NSZUMK{Y}T)078$N~TKPI.jpg

  • 编译

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

GKJFX@Y]6~7IY65TPSTM]YV.png

image.gif

addins 插件


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

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


模板修改

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

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

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

EXY$[8TT%1`S(49I54%Z656.png


image.gifconfig.yaml 文件


主要改的是title(4行),subtitle(84行),这时候保存下该文件,右下角即可快速得到以下界面:

I_B_5162W3W071KSWEL9`T1.png

本地网站


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

AN]05T7QXQ8_]}_7%K@(H[F.png


image.gif修改图片


此时如果界面没有更新(可能是 bug),你可以运行一下代码,类似重启一下:

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

L2]6~SQY6TYIKE_V{8$3C94.png


修改后的 blog


此时大功告成啦!其他创建新的博客,内部版式修改啥的,内容很多,我们下期在细讲,记得关注我的公众号,干货奉上。


将项目与 github 相连

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

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

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

  • github 桌面版本操作

连接本地的文件夹(zss),按照下面的图片操作。

F%J{3{NA0){PK8[VDO{[ZA3.png


连接本地文件夹


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

M$5]Q[KPOOCI4O$S99~NC(I.png


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

image.gifO2VF)ZX[JH8_`XM(]2X(M~U.png


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

image.gifpublish仓库

  • 查看是否上传

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

HL6Y}X{M){K~TH{R1{R[EGR.png


确认上传完毕


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

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


使用 Netify 部署网站

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

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

YG%P6@X}{@]MEA0WF{Q8)50.png


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

image.gifF5N@{KN`PX5@XLF$GNC1IS2.png


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

image.gif部署网站


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

Y5{AXTB9YCPSVQ`U5KD_T]I.png


等待结果


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

MGI55U}CAWT%144`L`C)RQB.jpg@T34US$J`$5QBU@]8[605R8.png


部署成功

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

当然你可以在前面说的 site settings 重新设定网站的名字,例如我的 demo 网站是:https://zss001.netlify.app/(文末直达)

image.gif白色版本image.gif黑色版本


附件:hugo 主题选择

hugo主题网站[5]给出了很多免费试用的主题模板,你可以选择一个你自己喜欢的主题(不需要和我上面一样),该网站的封面如下:

XJD]J4US86$BL@Y~6LKU4YF.png


hugo主题网站


小编刚使用的是:A simple but not simpler blog theme for Hugo[6],进入之后的界面如下,然后点击View Github进入对应的仓库。

NH{EA3BKSMTKOMO1Y6JP}MY.png


打开他的github仓库后呢,复制名称到创建界面时的(Hugo theme)中。

]_Q1HR0%YOVQ{G6Y]TCJ2(E.png

刚才前面说的主题就是这样得到的!

目录
相关文章
|
6月前
有关学习如何管理团队的书籍推荐
有关学习如何管理团队的书籍推荐
87 0
|
20天前
|
小程序 前端开发 数据可视化
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
|
17天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
30 2
|
25天前
|
敏捷开发 数据管理 数据挖掘
高效项目管理必备!2024年10款优质软件全解析
在快节奏的互联网行业中,高效的项目管理工具是成功的关键。本文推荐10款优质项目管理软件,包括板栗看板、Asana、Trello、Jira、Microsoft Project等,帮助团队提升效率、优化资源、缩短项目周期。每款工具都有其独特优势,适合不同规模和需求的团队使用。
42 0
高效项目管理必备!2024年10款优质软件全解析
|
6月前
|
存储 前端开发 搜索推荐
在自己的服务器上部署个人博客和开源项目:实现数字存在感
在自己的服务器上部署个人博客和开源项目:实现数字存在感
|
6月前
|
前端开发
前端小白如何开发新项目(速成版)
前端小白如何开发新项目(速成版)
111 0
|
运维 前端开发 应用服务中间件
🚀作为前端,怎么让其他同事给你挑大拇哥👍?运维命令简易上手
🚀作为前端,怎么让其他同事给你挑大拇哥👍?运维命令简易上手
|
计算机视觉
R沟通|Rmarkdown构建简历并部署到个人网站
上一期已经对使用 latex 模板构建 cv 做了较为详细的说明:R沟通|使用latex模板构建个人履历。但是存在一个问题:Latex 最后输出的是 pdf 版本,如果你想把他部署到自己的个人网站上,可能就比较费劲了(害,是我不会)。所以请教了李康国学弟之后,我又尝试了下使用 Rmarkdown 构建 cv 并将其部署到 gitee中,这样所有人都可以通过网址访问我的 cv 了。
327 0
R沟通|Rmarkdown构建简历并部署到个人网站
|
前端开发
前端知识学习案例12-开发企业网站12-团队介绍部分1
前端知识学习案例12-开发企业网站12-团队介绍部分1
50 0
前端知识学习案例12-开发企业网站12-团队介绍部分1
|
前端开发
前端知识学习案例13-开发企业网站12-团队介绍部分2
前端知识学习案例13-开发企业网站12-团队介绍部分2
61 0
前端知识学习案例13-开发企业网站12-团队介绍部分2
下一篇
无影云桌面