如何搭建个人博客: 新方案 blogdown + hugo + netlify + github

用户头像
lmymirror
关注
发布于: 2020 年 07 月 14 日
如何搭建个人博客:新方案 blogdown + hugo + netlify + github

程序员搭建博客有很多种手段:

  1. 在 Github 里使用 SUMMARRY.md 作为目录索引, 然后使用 Gitbook 变成电子书

  2. 直接在 Github issue 写文章

  3. 使用 Github Pages, 部署工具 Jekyll, Hexo, Hugo

  4. 购买域名, 服务器, 自己搭建个人博客

1,2 最简单, 3次之, 4最难,也最麻烦.

我尝试过 1,2,3. 也是够折腾的.



今天, 我发现第3种方案又有了新玩法, 主要也是参考这篇文章: 用R语言的blogdown + hugo + netlify + github建博客



建议大家把本文作为 用R语言的blogdown + hugo + netlify + github建博客 的补充性文章.

新方案在 3 hugo 基础上使用 blogdown 生成创建静态网站, 然后使用 netlify 对静态网站进行部署.



相比 Github Pages, netlify 对 Github 作为博客的仓库的命名没有限制, 可以随意取, 理论上可以创建N多个网站(N=可创建的仓库的数量). 你可以直接使用 netlify 的二级域名来访问博客.

一些名词

  • RStudio : 是专门针对 R 开发的一款 IDE.

  • Rmarkdown : 是 RStudio 网站开发的一个项目,旨在通过 Markdown 结合 R 来完成文章写作

  • LaTeX : 是一种通过宏语言进行文档排版的排版系统, 它提供了丰富的功能, 但是符号多, 学习更为繁琐

  • pandoc : 是一把用于文档转换的瑞士军刀。通过它进行任意格式的文档转换,同时排版结果也不失美观

  • blogdown : 提供使用 R Markdown 创建静态网站的支持

  • bookdown : 使用 R Markdown 写电子书

  • netlify : 对静态网站进行部署, 提供域名支持



我们来一步一步搭建出个人博客,Imymirror的个人博客 是我搭建完成后的成果.

安装R语言

中国站下载存档:https://mirrors.ustc.edu.cn/CRAN/

下载PKG, 比如现在最新的 R-4.0.2.pkg, 双击按照提示一步步安装.

安装完成后, 在终端输入 大写 R, 就会进入 R 语言 Shell.

更换 R语言安装源(镜像)

国内的源:

清华CRAN镜像:https://mirrors.tuna.tsinghua.edu.cn/CRAN/

同济CRAN镜像:https://mirrors.tongji.edu.cn/CRAN

北交大CRAN镜像:http://mirror.bjtu.edu.cn/cran



创建一个 ~/.Rprofile 文件

## Default repo
local({r <- getOption("repos")
r["CRAN"] <- "https://mirrors.tuna.tsinghua.edu.cn/CRAN/"
options(repos=r)
})


下载 RStudio



官网下载地址 :RStudio | Open source professional software for data science teams

RStudio 一些基本配置

Tools -> Global Options -> Sweave -> Weave Rnw files 选择 using:knitr

Tools -> Global Options -> Sweave -> Typeset LaTex into PDF 选择 using:XeLaTeX

这个是生成 PDF 文件用的,中文用户最好选择 XeLaTeX

Tools -> Global Options -> Git/SVN -> Git executable: : 安装好 git 后,打开这里应该就可以看到 git 的路径,如果没有进行配置

安装 blogdown 和 hugo


install.packages('blogdown')

blogdown::install_hugo()

Github 创建 repository

填写好 repository name、Description,默认选择 Public

复选框 Initialize this repository with a README

add .gitignore选择R

repository name 没有要求,不像 github 的 pages 服务要求名字和 github 的账号名称一样,建议起名domainname.com

blogdown 建站

rstudio,File -> New Project -> Version Control -> Git

填写 Repository URL: https://github.com/yourGithubName/domainname.com

设置 gitignore

打开 rstudio 右下角的Files标签,点击.gitignore文件,改成下面这样(参考 Yihui):

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


初始化 blogdown

打开:File -> New Project -> New Directory -> Website using blogdown

因为我们已经安装了 hugo,所以去掉 hugo 选项,Yihui 是建议用 hugo-xmin 主题开始我们的 blogdown 之旅

我使用的是olOwOlo/hugo-theme-even主题

本地运行网站

点击菜单 Tools 下面的Addins 点击Serve Site,可能会提示安装几个包例如 shiny、miniUI 等,点击 yes 安装

等价操作为 blogdown::serve_site()

写博客

Tools 下面的 Addins,这次我们点击New Post, 相当于 blogdown::new_post()

Filename 处会自动帮你填写为 Title 处的内容,FilenameSlug 还是建议使用字母,尤其是Filename,如果博文里面不需要用到 R 语言的代码计算结果生成图表的话,Format处就选择Markdown格式

点击Done,就会在/content/post文件夹下面生成一个文件名为2000-01-01-my-first-blog.Rmd

设置 netlify

具体步骤见

  1. 打开 https://app.netlify.com

  2. 使用 Github 登录

  3. New site from Git 按照步骤将 Github 博客的仓库跟 Netlify 关联起来

  4. 创建好之后, Site Setting -> Domian Management -> Custom domains 可以对默认的二级域名进行修改.

至此, 布置就完成了. 只要我们往 Github 的仓库提交 Markdown 文件, Netlify 就会部署代码, 我们访问相关域名即可.

对 Event 主题的配置文件进行修改

打开根目录下的 config.toml 文件, 以下是我的修改项:

defaultContentLanguage = "zh-cn"
title = "Imymirror 的个人博客"

[author] # essential # 必需
name = "Imymirror"

[[menu.main]] # config your menu # 配置目录 将 name 改为中文
name = "首页"
weight = 10
identifier = "home"
url = "/"
[[menu.main]]
name = "归档"
weight = 20
identifier = "archives"
url = "/post/"
[[menu.main]]
name = "标签"
weight = 30
identifier = "tags"
url = "/tags/"
[[menu.main]]
name = "分类"
weight = 40
identifier = "categories"
url = "/categories/"


since = "2020" # 站点建立时

toc = true # 是否开启目录
mathjax = true # 是否使用mathjax(数学公式)

[params.gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk
owner = "zhigang" # Your GitHub ID
repo = "imymirror.netlify.app.site" # The repo to store comments
clientId = "13c6a20eecafcb6e47b" # Your client ID
clientSecret = "0e0ba3f90e399da84da20f93c5a86aa4477e64" # Your client secret

[params.social] # 社交链接
a-email = "mailto:ifmtcm2020@gmail.com"
# b-stack-overflow = "http://localhost:1313"
# c-twitter = "http://localhost:1313"
# d-facebook = "http://localhost:1313"
# e-linkedin = "http://localhost:1313"
# f-google = "http://localhost:1313"
g-github = "http://github.com/zhigang26"
# h-weibo = "http://localhost:1313"
# i-zhihu = "http://localhost:1313"
j-douban = "https://www.douban.com/people/158149431/"
# k-pocket = "http://localhost:1313"
# l-tumblr = "http://localhost:1313"
# m-instagram = "http://localhost:1313"
# n-gitlab = "http://localhost:1313"
# o-bilibili = "http://localhost:1313



发布于: 2020 年 07 月 14 日 阅读数: 182
用户头像

lmymirror

关注

I am what i am. 2019.10.12 加入

我是一个程序员. 微信公众号 : shaohuogun2019

评论 (1 条评论)

发布
用户头像
有机会试试
2020 年 07 月 14 日 10:12
回复
没有更多了
如何搭建个人博客:新方案 blogdown + hugo + netlify + github