3 min read

百折千转折腾网站的日子

2025-06-06

一直以来我都想创建一个单独的r-finance网站来向国内的人推广R语言在金融领域的知识和实践。之前苦于没有精力和时间以及缺乏建设网站的经验没能去做。毕竟作为财务管理出身的人，虽然一直以来也会跟R、Python、SQL等编程语言打交道，但从未与搭建网站单刀相对。

转机就在最近。我在学习Hugo搭建网站的过程中，发现github和netlify结合可以很便捷地搭建网站。加之Hugo提供的主题非常丰富，完全可以满足我的网站需求。无需再等，我决定尝试一下。

这次搭建网站我使用的基础工具是Rstudio以及R包bolgdown。有了工具之后，我开始在脑海中构思网站的结构，并在茫茫模板之海中打捞自己中意的模板。终于天不负我，我找到一个叫 mainroad的主题，简介大方，十分贴合我的想象。

以下是我的建站步骤，十分丝滑。

创建和克隆github库

我先在github上建立一个名为r-finance的库。创建库时选择自动生成readme文件、gitignore文件和license文件，同时选择master作为默认分支。之后，在Rstudio中操作克隆项目到本地。具体操作为：

Rstudio ->> tools ->> Terminal ->> New Terminal

输入以下命令将r-finance库克隆到本地。

git clone https://github.com/dengyishuo/r-finance.git

进入r-finance目录，设置.gitignore文件。这个文件作用极大，可以帮助我们忽略一些不必要的文件，避免提交到github上。以下是我设置的.gitignore文件内容：

public/
resources/
.hugo_build.lock
# History files
.Rhistory
.Rapp.history
*.Rproj
.Rprofile
# Session Data files
.RData
.RDataTmp
# User-specific files
.Ruserdata
# Output files from R CMD check
/*.Rcheck/
# RStudio files
.Rproj.user/
# knitr and R markdown default cache directories
*_cache/
/cache/
# R Environment Variables
.Renviron

如果未安装blogdown包的话，先在Rstudio中安装blogdown包，命令如下：

install.packages("blogdown")

接下来在Rstudio中，将r-finance文件夹设定为当前工作目录，再使用blogdown包创建一个网站。命令如下：

blogdown::new_site()

在bash中使用以下命令更新主题为mainroad：

cd r-finance
# 更新主题为子模块
git submodule add https://github.com/vimux/mainroad.git themes/mainroad
# 查看子模块状态
git submodule status
# 查看子模块内容
git cat .gitsubmodules
# 如果有异常，重新初始化
# git submodule update --init --recursive
# 删除旧主题
rm -rf themes/hugo-lithium
#删除mainroad主题内部的 .git 文件夹
rm -rf themes/mainroad/.git 
# 将主题添加到git中
git add themes/mainroad
# commit 更改
git commit -m "fix:include theme direct"
# 将更改推送到github
git push origin master

配置config.toml

在r-finance目录下创建一个config.toml文件，内容如下：

baseurl = "https://rfinance.org.cn"
title = "R-Finance中国"
languageCode = "zh-CN"
theme = "mainroad"
disqusShortname = "" # Enable comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking id

[pagination]
  pagerSize = 10 # Number of posts per page

[params]
  description = "rfinance's Personal blog about everything" # Description of your site
  opengraph = true
  twitter_cards = false
  readmore = false # Show "Read more" button in list if true
  authorbox = true
  pager = true
  post_meta = ["date", "categories"] # Order of post meta information
  mainSections = ["post", "docs"]
  ignoreLogs = ["warning-goldmark-raw-html"] 

[params.logo]
  subtitle = "Just another site" # Logo subtitle

[params.sidebar]
  home = "right"   # Configure layout for home page
  list = "right"   # Configure layout for list pages
  single = "right" # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist"]

[params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

[params.author]
  name = "rfinance"
  bio = "rfinnace's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
  avatar = "img/avatar.png"

验证网站

下面来验证hugo是否可以正确生成网站，命令如下：

rm -rf public
git submodule update --init --recursive
hugo --gc --minify

如果一切顺利，就可以将文件推送至github了。

推送到github

推送至github之前，先将r-finance目录下的所有文件添加到git中，命令如下：

git add .
git commit -m "build website"
git push origin master

配置netlify

在r-finance目录下配置netlify.toml，内容如下：

[build]
command = 'git submodule update --init --recursive && hugo --gc --minify'
publish = 'public'

[build.environment]
HUGO_VERSION = '0.147.7'
HUGO_ENV = 'production'

接下来在netlify上创建一个新的站点。具体步骤：

  1. 登陆自己的账号
  2. 选择Add new project
  3. 选择Import an existing project
  4. 选择github作为代码源
  5. 选择r-finance库
  6. 给项目取一个名字:r-finance（这个名字将决定网站在在netlify上的默认网址：https://r-finance.netlify.app）
  7. 选择master分支。发布目录为public。

接下来在netlify上配置构建命令和发布目录，构建命令为：

git submodule update --init --recursive && hugo --gc --minify

配置环境变量，添加变量：

HUGO_VERSION = '0.147.7'
HUGO_ENV = 'production'

选择 deploy 即可。此时已经可以用https://r-finance.netlify.app 访问网站了。

设置个性化域名

去阿里云购买一个自己中意的域名，我购买的域名是rfinance.org.cn。接下来在阿里云控制台中进入域名解析设置：

选择快速添加解析：

  • 您的业务需求是：网站域名解析到另外的目标域名
  • 请选择网站域名：
    • x-quant.com.cn（对应设置“@”主机记录）
    • www.x-quant.com.cn（对应设置“www”主机记录）
  • 请选择目标域名：r-finance.netlify.app

确定即可。

接下来在netlify上配置自定义域名。步骤为：

  1. 登录netlify，进入r-finance项目
  2. 点击Set up your project
  3. 点击Set up a custom domain
  4. 点击domain you already own
  5. 输入你的域名（如rfinance.org.cn）
  6. 点击Verify domain，将域名添加到netlify的域名列表中。

接下来在netlify上配置SSL证书，选择Let’s Encrypt证书即可。

等待一些时间，网站就可以正常访问了。