你是不是特別想創建一個自己的私人博客?以及為什麼要使用 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/