我要用這個教程搭建個自己的個人博客

2021-12-27 R語言統計與繪圖

你是不是特別想創建一個自己的私人博客?以及為什麼要使用 blogdown 搭建博客?難度是不是很大,和其他搭建博客而言有什麼優點?

在小編使用過一段時間後,個人認為 blogdown 搭建博客的優勢在於,將 Rmarkdown 與 hugo 相結合,再加上 github 和一個可以部署的網站。你可以輕鬆的將一篇篇 Rmarkdown 的文章自動上傳上去。而 Rmarkdown 的優勢在於,你的代碼結果都可以輕鬆呈現。而不是「複製粘貼」結果!

如果你還不會 Rmarkdown,那請你先看看文末為你提供的 Rmarkdown 學習大禮包,結合 b 站視頻學習效果更佳,有疑問可以在公眾號提問,小編願意為你解答。

本文是小編在學習和使用中記錄的一個非常詳細的筆記,主要參考:謝益輝的《blogdown: Creating Websites with R Markdown》[1],王詩翔的 b 站直播視頻[2](公眾號:優雅 R )以及一些 YouTube 視頻教程[3]。

本文框架1. 入門教程1.1 安裝

首先你需要安裝 blogdown 包

install.packages("blogdown")

注意:我們的操作是在 Rstudio下進行操作的。

1.2 創建

安裝完後,新建一個新的 Project(File-New project),然後選擇New Directory。之後滑鼠滑到底部,找到 Website using blogdown 並點擊進入。

創建新的項目

此時進入一下界面,項目名稱建議使用英文,目錄自行選擇。默認情況下 Hugo theme 是謝益輝的模板,這裡我將其進行拓展,使用了另一個個人比較喜歡的主題:Fastbyte01/KeepIt,左下角勾選打開新的 session。

注意:為了保證整個演示流程的完整性,小編將其他主題選擇教程放到文末作為附加內容。請大家注意我這個演示的邏輯,以免越學越糊塗。並且該教程也是小編在前段時間反覆試錯得到的。

新建界面時的設置

新建後的界面如下,右下角給出了整個項目的文件,其中圈起來的最為關鍵,我們稍後介紹,先編譯下這個初始的 blogdown。


選擇 Tool - addins(windows 更方便找到)然後選擇以下按鈕。

addins 插件

稍等片刻,這時就可以得到最為原始博客模板啦!

如果你做到這,恭喜你!基本已經會 1/3 了!沒錯就是這麼簡單。

1.3 模板修改

不同的模板修改起來是不一樣的,但是原理類似,如果你知道一些 html 的知識,那可能會更好。如果不會,就慢慢改咯!

使用技巧:改一個地方,報錯下,右下角 viewer 會自動編譯,你可以根據變化看看是不是你想要的結果(「笨」方法)。

這裡以我這個模板為例子:主要修改的是 config.yaml 文件,首先將其打開,得到的界面如下:

config.yaml 文件

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

本地網站

如果你想修改這個頭像,可以在該 yaml 文件的第 34 行找到代碼  avatar: /images/me/avatar.jpeg。此時從桌面打開該文件夾,更換該 jpeg 文件即可,例如:

頭像位置

此時如果界面沒有更新(可能是 bug),你可以運行一下代碼,類似重啟一下:

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

修改後的blog1.4 將項目與 github 相連

本地博客基本構建完畢,接下來我們要講其連接到自己的 github 上,再部署到免費的網站上。

首先先將該文件夾上傳到自己的 github 上,你可以使用 Git,但是小編表示不大熟,所以就使用按鈕式操作的桌面版本 github 了。

注意:如果你第一次使用 github,以及還沒下載 GitHub 桌面版本的小白。你可以通過百度搜索,簡單學習下。這裡我就不做介紹了(我也不是很會,就不班門弄斧了)

連接本地的文件夾(zss),按照下面的圖片操作。


之後如果出現一下界面,可以按照我做的操作:點擊藍色字

跳轉到這裡的界面,這個將是線上github倉庫的名字啥的設置。寫好後,就可以創建新的倉庫了。


之後將創建好的倉庫publish上去。記得將其Keep this code private 的勾取消了(變成公開的倉庫)。


這時候你可以去網上自己的GitHub確認下,是否有這個倉庫,我的如下。


這時候本地的項目和 github 已經連接好啦!

恭喜你,這時候你已經回了2/3啦!馬上就可以擁有自己的私人網站啦!

1.5 使用 Netify 部署網站

這裡我使用的 Netify:https://app.netlify.com。當然你也可以使用其他方式進行部署,具體可見 Creating Websites with R Markdown 的第三章節[4]。

首先是註冊啦(這裡我已經忘記怎麼操作了,因為創建很久了,不過不難,如果進不去可能你需要科學上網)。之後將其與 github 相連接,進入以下界面:

點擊新建一個 site 來自 Git,之後跟著步驟往下做。點擊左下角的 Github,之後選擇剛才我們創建的那個倉庫(zss)。

之後根據下面的界面進行部署網站。


這時候,部署需要一些時間,得到下面的界面,你可以通過 Site settings 修改自己的網站名(這裡不做演示,很簡單)。


稍等片刻得到以下界面,點擊網站的連結,即可得到你自己的網站啦!

image-20210719151437396

恭喜你,結束啦!你已經會簡單創建自己的網站啦!

當然你可以在前面說的 site settings 重新設定網站的名字,例如我的 demo 網站是:https://zss001.netlify.app/

白色版本黑色版本2. 工作流

在前面幾項任務都完成好後,接下來創建 rmd 文件,保存,github 提交,之後過幾分鐘網站就會自動同步你的最新博客啦!

這整個流程非常香,你唯一擔心的是:如何寫好你的博客。你完全不需要擔心如何排版,如何部署 rmd/md 文件等問題。這就回到了最為純粹的知識輸出環節啦!

接下來,將會告訴你如何創建新的 post 以及如何提交(內容非常簡單)。

2.1 創建 RMD 文件

打開你項目所在的文件夾(zll-blog),點擊 Rproject 文件。小編平常直接打開桌面版本的 github,找到對應的 Repository,然後按快捷鍵(紅色框框給出了,Show in Finder)如下所示:

github桌面版本界面

當然,你可以按快捷鍵直接進入網上的 Github 倉庫。

進入 Rstudio 界面後,打開你的插件 addin。mac 是在菜單欄 Tools -> addins中,windows 直接在菜單欄就有一個小按鈕 addins 了。然後選擇下面紅色框住的內容,並點擊執行(Execute)即可。

選中紅色框,執行

或者你直接在控制臺輸入代碼也可以創建新的 Post(blogdown::new_post())。當然你可以在打開這個Project之後先把博客渲染出來(blogdown::serve_site())。

之後會跳轉出一個框框,你按照自己想寫的填充就好啦!注意 Format 有三種形式。小編的一些與 R 代碼無關的就是直接創建 .md 文件寫的。然後點擊 Done 按鈕,即可。

New Post事例2.2 填寫內容

之後跳轉到下面的界面,這時候如果你提前已經渲染了博客,右邊的 Viewer 窗口就會自動同步你寫的東西。

開始你的內容輸出啦!

接下來,內容就要靠你自己啦!你可以寫一些筆記,想法等。小編這裡給出前段時間寫的一篇博客的內容作為示範。

填寫你的內容

注意:如果你不會使用 markdown 文件寫文章的話。請您轉到:1.5w字的Rmarkdown入門教程匯總。或者你有其他寫好的 md 文件的話。你可以直接將其導入即可。但是注意的是,圖片等需要你手動添加到對應的目錄下。

保存之後,你的 new post 就已經完成啦!

new post 完成2.3 使用 github 上傳內容

最後一步,就是將你剛才修改過的內容,通過 github 進行上傳。操作流程如下圖所示,之後等幾分鐘,Netify 網站知道你的該 github 倉庫內容出現變化後,會自動部署新的網站。

上傳到 github

這時一切完畢!恭喜你已經掌握整個搭博客和寫博客的流程啦!

附件:hugo 主題選擇

hugo主題網站[5]給出了很多免費試用的主題模板,你可以選擇一個你自己喜歡的主題(不需要和我上面一樣),該網站的封面如下:

hugo主題網站

小編剛使用的是:A simple but not simpler blog theme for Hugo[6],進入之後的界面如下,然後點擊View Github進入對應的倉庫。

打開他的github倉庫後呢,複製名稱到創建界面時的(Hugo theme)中。剛才前面說的主題就是這樣得到的!

小編有話說如果你是初學者,對 Rstudio,github,hugo,html 都不是很熟悉的話。莊小編建議你將我前面說的整個流程照搬實現一次先。然後再拓展下,創建其他不同的 hugo 模板。

小編以前就是好高騖遠,拿一個很新奇的作為模板,結果後面出錯了,始終找不到問題所在。一遍流程都走不下來。

搭建自己的博客,對於小編來說只是一個興趣愛好。當然也需要一定的時間和精力去維護(添加內容啦)。參考資料[1]

《blogdown: Creating Websites with R Markdown》: https://bookdown.org/yihui/blogdown/

[2]

b 站直播視頻: https://www.bilibili.com/video/BV13v41147BH?from=search&seid=3349593737199514913

[3]

YouTube 視頻教程: https://www.youtube.com/watch?v=ox_Ue9yzf-0

[4]

第三章節: https://bookdown.org/yihui/blogdown/deployment.html

[5]

hugo主題網站: https://hugothemesfree.com/

[6]

A simple but not simpler blog theme for Hugo: https://hugothemesfree.com/a-simple-but-not-simpler-blog-theme-for-hugo/

相關焦點

  • 手把手搭建個人博客(圖文教程)
    首先我們談一談搭建個人博客必要性,個人認為在學習過程中,被動接受知識對你的提高是輕微的。可見搭建個人博客是非常有必要的,很多讀者很早就要求我發一篇搭建個人博客的文章,由於個人時間願意本來想直接轉載,但是在自己實際操作中遇到很多坑,浪費不少時間,都是把主要步驟給出且時間久遠,沒有詳細的圖文配合。
  • 如何搭建個人獨立博客網站?
    有網友留言想看看,如何搭建博客,今天他來了(liao)。這是一個搭建WordPress博客網站的教程,內容會很細順便科普一下相關概念,小白也不用怕,相信我,你肯定聽得懂、做得好。為什麼搭建博客?想先說一下這個古老的東西「博客」,有人說博客已經過時了,現在大多數人都用手機看朋友圈、微博等。
  • 從零開始搭建個人博客(一)- 使用hugo搭建個人博客
    背景使用個人博客也有一年多的時間,這一年多的時候踩了很多坑,也學到了很多知識。
  • 技巧| Blogdown+Hugo+Netlify搭建個人博客
    作為一個醫學生,每每在網絡上瀏覽到各路程序猿大神們自己搭建的個人博客,心中都無比羨慕。最近看到謝益輝、王詩翔、莊閃閃等人介紹的用R語言來搭建個人博客,心中羨慕之情如滔滔江水無法阻擋。於是自己動手,在奮鬥了2天1夜之後,終於把我的個人博客阿狸的Blog的雛形搭建出來了,途中踩坑數個,在這裡做個記錄。也許有人要問,搭建個博客要這麼久麼。
  • 如何快速搭建屬於自己的個人博客網站?
    很多小夥伴在後臺諮詢我,如果想在網際網路上創業, 那麼應該要做哪些準備呢?我給他們的建議就是,首先要搭建一個屬於自己的博客網站。這個博客網站就相當於你在網際網路上的鋪面,試想沒有鋪面何來的人流?然而還是有不少人心中還是充滿疑慮,「我不懂編程,也不會寫代碼,可以搭建博客網站嗎?」答案自然是肯定的。
  • 教程| 如何搭建個人博客網站
    今天為大家帶來一篇教程《如何搭建個人博客網站》,喜歡的同學可以研究一下。前期準備:1、一臺雲伺服器2、一個域名3、一個博客網站模板主要涉及知識點:linux基礎命令,mysql基礎操作 步驟1、 伺服器搭建購買一臺網絡雲伺服器,可以考慮阿里雲、騰訊雲、百度雲等,這裡以阿里雲伺服器舉例。
  • 零代碼教你用 GitHub 搭建個人博客!
    轉自量子位,作者賴可GitHub 不僅可以傳代碼,還可以建博客。利用 GitHub Pages 平臺,就可以搭建非常好用的個人博客。但是難點在於,你在要敲很多代碼才能搭出一個博客。對於小白和新手來說,太不友好。沒關係!現在不用寫代碼也可以了。不需要敲碼,不用寫使用命令行,可以自定義主題,還能有自己的域名。
  • 搭建個人博客,我遇到哪些棘手的問題?
    1.2 穩定性首先,小鹿搭建博客是打算長期寫下去,可能是以後十年,二十年甚至三十年不等,所以對博客框架的穩定性是俺的第一個要求。通過這個要求,在第一節階段會逐漸篩選掉一些市面上不穩定以及作者已經不維護的博客框架。
  • 一看就會的保姆級教程,10分鐘搭建個人博客
    Part1前言相信很多人都想擁有一個自己的個人博客,現有的個人博客搭建框架已經有很多了,例如 hexo 、vuepress 、jekyll 等等,這裡我選用 vuepress 來快速搭建個人博客網上教程千千萬,但總歸都是零零散散的,沒人會給你講解得清清楚楚,所以我這裡就手把手來講解一下如何從零搭建
  • 個人博客|第一章|手把手教你搭建、上線個人博客
    」前言Hello,我是淡漠,今天帶大家一起搭建個人博客。個人博客一直都是非常受歡迎的個人項目,個人博客分靜態和動態兩種,淡漠個人比較青睞靜態博客,靜態不需要管理後端,相比動態博客,靜態博客可以不需要花一分錢,開發成本要低一些,畢竟作為學生黨,買伺服器放一個博客網站有點浪費,也可以把精力集中於寫博客,而不是開發博客。
  • Hexo+Github/Gitee 搭建個人博客
    如果你有總結整理的習慣,可以考慮搭建一個個人博客,把文章發布在上面,相比於其它平臺,
  • 5分鐘 搭建免費個人博客
    三步完成免費個人博客搭建, 這是一篇小白也能看懂的文章,本文主要針對OS X ,Windows 除了軟體安裝方式和命令有些區別(裝了git bash也一樣),其他基本一樣。你可能經常會看到類似於這樣的博客:
  • Hugo搭建個人靜態Blog(保姆級)教程
    人性化保姆級服務的我推出更簡便易行的hugo搭建個人靜態blog教程安裝hugo 推薦使用brew進行package的管理,首先安裝brew,安裝完成後用 brew 安裝 hugo安裝brew完成後,進入終端並鍵入:brew install hugo安裝完成輸入 :hugo version 查看是否安裝成功。
  • 使用Hexo+Github搭建個人博客網站
    曾幾何時,筆者也幻想過寫個項目來搭建屬於自己的個人博客
  • 可能是最全面的github pages搭建個人博客教程
    Git倉庫首先你要在github上有自己博客倉庫,用來生成和存放博客文章。你可以直接fork我的博客倉庫。這樣你馬上有了自己的博客倉庫。點這裡https://github.com/lemonchann/lemonchann.github.io我的博客地址進去fork,之後在你自己的倉庫下會看到剛複製的倉庫。以後的操作都在你自己的倉庫進行。
  • 手把手免費搭建個人博客網站
    建站三要素:伺服器、域名、建站模板伺服器可以是硬體主機和虛擬主機,硬體主機包括大型伺服器、工作站、個人電腦或者是樹莓派等掌上電腦,大型機房產生的費用有主機託管費、固定帶寬費用、電費、購買伺服器的費用。本次教程使用GitPage可以達到免費試用的目的。域名可以在各大域名購買網站註冊,比如國內比較流行的萬網,一般的.com域名價格在55/年,需要提醒的是域名必須通過備案才能使用。網上很多出售建站模板的網站,可以根據需求類型購買即可。官網商城類可以去凡客,博客框架可以使用wordpress或者Hexo。
  • 想要搭建個人博客?我調研了100來個 Java 開源博客系統,發現這 5...
    技術 : Springboot + Shiro + MySQL + Mybatis + Redis推薦等級 :⭐⭐⭐⭐評價 :我個人比較喜歡的一款博客樣式類型(不過,需要花更多時間自定義和完善。沒精力折騰的,慎入!),自帶評論系統、SEO 等功能。比較適合做知識沉澱類網站。
  • 一杯茶的時間,上手 Gatsby 搭建個人博客
    我的博客最初是用 Github Pages 默認的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有諸多不便。後來基於 Node.js 的 Hexo[4] 橫空出世,我便重構了博客[5]對其深入整合,還為其寫了一個 emoji 插件[6]。
  • 從頭教你使用 Hugo 搭建自己的博客
    問我怎麼玩,D瓜哥也懶得手把手教了,乾脆寫篇文章來做個說明吧。也許對其他朋友也有所幫助。潮起潮落D瓜哥早在 2012年就使用 WordPress 搭建了一個博客: "地瓜哥"博客網—分享技術帶來的喜悅,WordPress 不虧是全世界最流行的開源 CMS 系統,各種插件可以滿足非常對的需求。
  • 如何搭建一個比簡書更精美的個人博客
    所以一般技術大神都有自己專門的博客,既能隨心所欲地展現自己的靈感,也可以讓自己的勞動免受垃圾廣告的侵犯,為求知者提供了集專業和舒適於一體的美的享受。幸好我們生存在一個開源的時代,今天小編就用hexo,帶你搭建一個比簡書更精美的個人博客。