构建blog

bymunije

8 minute read

构建过程可参考yihui’s book

软件准备

Rstudio配置

安装好上述软件后，需要对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

安装blogdown和hugo

安装blogdown：

install.packages('blogdown')

安装hugo：

blogdown::install_hugo()

如果报错，可以直接安装开发版：

install.packages("devtools") devtools::install_github("rstudio/blogdown")

如果还是报错，就手动下载安装：

blogdown:::install_hugo_bin("d:/hugo.exe")

blogdown::install_hugo()会安装最新版本的hugo，会由于不兼容导致blogdown:::serve_site()时出现问题 ，建议使用blogdown::install_hugo('0.80.0', force = T, use_brew = F)安装（20220806）

Github新建一个仓库

登录github后，在页面右上角点击+,然后点击新建仓库New repository会出现下面的界面，在Repository name为仓库创建名字，然后选择仓库类型为Public或Private,选择Initialize this repository with a README后，点击Create repository新建仓库。

blogdown建站

1.创建项目

回到Rstudio，File -> New Project -> Version Control -> Git，然后填写Repository URL,Project directory name会自动生成，选择一个合适的文件夹存放，点击Create Project创建项目

设置gitignore

打Rstudio右下角的Files标签，点击.gitignore文件，因为有些文件不需要啊上传到github, 比如public，是hugo渲染后的网页， 本地预览即可，因为在Netlify部署的时候会重新渲染

.Rproj.user
.Rhistory
.RData
.Ruserdata
blogdown
.DS_Store
public/

2.初始化blogdown

打开Rstudio,File -> New Project -> New Directory -> Website using blogdown，因为已经安装了hugo，所以去掉hugo选项,主题可以修改，点击Create Project创建项目

3.本地项目同步到github仓库

cd <本地项目目录>
git init
git add .
git commit -m "first comment"
git remote add origin https://github.com/<github帐号>/<仓库名称>
git remote -v
git pull origin master --allow-unrelated-histories
git push -u origin master

4.本地运行网站

点击Rstudio菜单Help下面的Addins->Serve Site，可能会提示安装几个包例如shiny、miniUI等，点击yes安装ok,，其实点击这个跟在console里面输入blogdown::serve_site()是一样的：

设置Netlify

1.注册Netlify

打开Netlify[https://app.netlify.com/signup]主页,直接在 Sign up with one of the following下面选择GitHub

2.绑定Github

登录Netlify后，点击导航栏Sites，再点击右上角New site from Git，再点击Github进行下列操作：

点击deploy site生成网站

3.设置个人域名（可跳过）

1).在Name.com购买域名时只支持paypal和信用卡付款，可以点击我的优惠链接,进入Name.com的注册界面并完善个人信息，登录以后可以查找需要域名并添加到购物车

点击右上角的购物车图标，进入付款界面，他们家的域名默认带上隐私保护，可以选择取消

2).进入Netlify，选择项目后点击Set up a custom domain

3).添加域名,在Custom domain下面输入在Name.com购买的域名，点击Yes,add domain确认。

4).添加完之后会出现下面的界面，需要到Name.com进行域名解析。点击界面的Check DNS configuration后，点击Set up Netlify DNS for …，复制四个地址到Name.com后，Netlify托管个人网站已经完成，可以直接用域名访问网站

解析成功后会出现如下界面：

5).添加https。Netlify使用的是Let’s Encrypt Certificate的免费证书，按步骤添加即可

更新博客内容

打开Rstudio，File -> New Project -> exist Directory -> blogdown dictionary，点击右上角Git标签，点击commit，选择更新内容，填写commit message点击commit -> push

  1. 报错LibreSSL SSL_read: error:02FFF03C:system library:func(4095):Operation timed out, errno 60，解决方法可参考这里

小细节的折腾

1.修改浏览器小图标.ico

(1).Photoshop将用到的图片保存为favicon.png 格式，大小为32*32 (2).使用在线工具 [ConvertICO.com - Convert PNG to ICO and ICO to PNG] (https://convertico.com/) 将其转换为 ico 格式 (3).为了获得较好的兼容性，可以使用 [BASE64] (https://jpillora.com/base64-encoder/) 将图片直接存放在网页的 head 中,可参考 [Adding a favicon to a static HTML page - Stack Overflow] (https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page/34699173#34699173) 链接，即将 <link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" /> 加入 /themes/hugo-future-imperfect/layouts/partials/header.html

2.使用aplayer html5播放器给网站增加音乐播放功能

(1).进入/themes/hugo-future-imperfect/layouts/partials/shortcodes/，新建并编辑[aplayer.html] (https://github.com/kmahyyg/kmahyyg.github.io/blob/raw2/themes/aether/layouts/shortcodes/aplayer.html) (2).使用时可在.md的任何地方

<!-- This enables you to use audio in your post -->
{ {<aplayer title="music-name" author="music-author"   musicurl="path/to/music.mp3">} }
<!-- More advanced example -->
{ {<aplayer title="music-name" author="music-author" musicurl="path/to/music.mp3" lrcfile="path/to/lrcfile.lrc" coverimg="path/to/music-cover.jpg" hls_src="false" mini="true" fixed="false" themecolor="#b89a66">} }

Params for configuration:

Name Type Required Notes
title string true Music title
author string true Music artist
musicurl string true Music file URL
coverimg string false Music cover image URL
lrcfile string false Lyric URL in LRC format
themecolor string false According to cover, change the player main color of the theme to an RGB hexed color, example: ‘#b7daff’
fixed boolean in string false Show player at the left bottom
mini boolean in string false Show player in a small square
hls_src boolean false musicurl is a HLS source

fixed and mini are conflicted, please do not set both to true.

具体请[阅读] (https://github.com/kmahyyg/kmahyyg.github.io/blob/raw2/themes/aether/README.md)

3.使用Highlight.js代码高亮

在/themes/hugo-future-imperfect/layouts/partials/header.html的模板中，添加以下内容：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/ocean.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

第一行的monokai.min.css是配色方案，第二行是highlight.js的压缩版，第三行是使用highlight.js着色，更多可前往[这里] (https://cdnjs.com/libraries/highlight.js)

4.修改<code>背景色

进入static/css,在.css文件中添加如下代码，更多可参考[这里] (http://ericnode.info/post/move_to_hugo/)

code {
	font-family: "Consolas", Courier New, Courier, monospace;
	background-color:#eaeaea;
	color:#f38181;
	font-size:14px;
	font-weight:normal;
	margin: 3px 3px 3px 3px;
	padding: 3px 3px 2px 3px;
	border-radius: 6px;
	border: 1px solid #e1e1e8;
}

5.添加Google Analytics

1). 注册Google Analytics账号，可直接使用Google账号

2). 在管理 -> 媒体资源设置 -> 跟踪信息 -> 跟踪代码页面获得Tracking ID即"UA-XXXXX-Y"

3). 在``config.toml`中设置Google Analytics的ID

googleAnalytics = "UA-XXXXX-Y"

4). 修改head.html文件，可参照这里

Quenstion:

1.git在github远程创建仓库后, 利用gitbash进行提交本地文件的时候出现如下错误(直接在Github网页upload会导致readme.md文件不一致导致此错误）：

解决办法1:

1: 进行push前先将远程仓库pull到本地仓库
$ git pull origin master    #git pull --rebase origin master
$ git push -u origin master

2: 强制push本地仓库到远程 (这种情况不会进行merge, 强制push后远程文件可能会丢失 不建议使用此方法)
$ git push -u origin master -f

3: 避开解决冲突, 将本地文件暂时提交到远程新建的分支中
$ git branch [name]
# 创建完branch后, 再进行push
$ git push -u origin [name]

解决办法2:

git pull --rebase origin master 
git push -u origin master

解决办法3:

git fetch origin master:tmp
git rebase tmp
git push origin HEAD:master
git branch -D tmp

2.Rstudio push 每次需要输入用户名和密码

解决办法：

1.git bash进入你的项目目录，输入git config --global credential.helper store,然后会在本地生成一个文本，记录账号和密码

2.使用上述的命令配置好之后，再操作一次git pull，它会提示你输入账号密码，之后就不需要再次输入密码

3. 设置Git

(1).设置用户名和email

git config --global user.name "Your Name" 
git config --global user.email "youremail@domain.com"

目录下会新建一个.gitconfig文件

(2).GitHub账号添加SSH Keys

以公钥认证方式访问SSH协议的Git服务器时无需输入口令，而且更安全

  • 创建SSH key ssh-keygen -t rsa -C "youremail@domain.com"系统会提示key的保存位置（一般是~/.ssh目录）和指定口令，保持默认，连续三次回车即可

  • Copy SSH Key 用vim打开文件id_rsa.pub文件内的内容，粘帖到github帐号管理的添加SSH key界面中vim ~/.ssh/id_rsa.pub

  • 添加到GitHub 登录github-> Accounting settings-> SSH key-> Add SSH key,填写SSH key的名称，然后将拷贝的~/.ssh/id_rsa.pub文件内容粘帖,add key按钮添加

  • 测试 ssh -T git@github.com

(3） 2021.8.13起，Github要求使用基于令牌的身份验证

使用账号密码时会报错 remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.

原先的密码凭证从2021年8月13日开始就不能用了，必须使用个人访问令牌（personal access token），就是把密码替换成token。

a）登录Github账号后依次点击，右上角头像 -> 下拉菜单中Setting -> 左侧栏的Developer settings -> 左侧栏的Personal access tokens -> 右上角Generate new token。

b) 填写Note(标题)/Expiration(验证token有效期限)/Select scopes(授予此令牌token的范围或权限)。

c) 生成令牌token成功后需复制下来保存，因为再次刷新网页的时候，会无法看到。

d）使用生成的token登录，可把token直接添加至远程仓库链接中，可避免在同一仓库每次提交都要输入token,token重新生成后也可执行改命令：

git remote set-url origin https://<your_token>@github.com/<USERNAME>/<REPO>.git
comments powered by Disqus