1.下载最新的release版本:
wget https://github.com/umputun/remark42/releases/download/v1.9.0/remark42.linux-amd64.tar.gz -O remark42.linux-amd64.tar.gz
tar xzf remark42.linux-amd64.tar.gz remark42.linux-amd64
sudo mv remark42.linux-amd64 /usr/local/bin
2.创建remark42专属用户及其目录:
sudo useradd -r remark42
sudo mkdir -p -m 770 /var/www/remark42
sudo chown :remark42 /var/www/remark42
3.创建配置文件:
sudo vi /var/www/remark42/remark42.conf
REMARK_URL=http://remark42.moorzon.com
SECRET=123123qq
SITE=xgoogle,xme
AUTH_ANON=true
EMOJI=true
其中SITE
字段可以用,
分隔以支持多个站点的不同ID标识,也即一个remark42实例可为多个不同的博客站点提供评论服务。
4.为remark42创建systemd service:
新建文件:/etc/systemd/system/remark42.service,内容如下:
[Unit]
Description=remark42 comment engine
After=network.target
[Service]
User=remark42
Group=remark42
EnvironmentFile=/var/www/remark42/remark42.conf
WorkingDirectory=/var/www/remark42
Restart=always
RestartSec=5
ExecStart=/usr/local/bin/remark42.linux-amd64 server
[Install]
WantedBy=multi-user.target
激活remark42服务:
sudo systemctl enable --now remark42
此时可以测试一下,访问:http://remark42.moorzon.com:8080/web/
如果能看到Demo page出现,则说明配置基本完成。
5.GitHub OAuth配置:
-
Click on New OAuth App
-
Set base URL:http://remark42.moorzon.com
-
Set callback URL by appending auth/github/callback to the base RemarkURL: http://remark42.moorzon.com/auth/github/callback
-
将获取到的client id 和client secret添加到remark42配置文件中:
sudo vi /var/www/remark42/remark42.conf
AUTH_GITHUB_CID=7c54af028aei43e021li AUTH_GITHUB_CSEC=ede3atyu0cf3119058baa2be9c17fb9783a54da3
6.以GitHub账号登录,获取GitHub Login ID(以github_开头),用来配置管理员身份:
sudo vi /var/www/remark42/remark42.conf
ADMIN_SHARED_ID=<GitHub Login ID>
7.Nginx反向代理配置:
sudo vi /etc/nginx/sites-enabled/remark42.conf
server {
server_name remark42.moorzon.com;
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
location / {
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:8080/;
}
}
sudo nginx -s reload
此时可以直接访问:http://remark42.moorzon.com/web/,无需再指定端口。
8.在博客中嵌入remark42评论系统:
添加如下内容到\Hugo\Sites\moorzon.com\themes\meme\layouts\partials\components\comments.html
<div id="remark42"></div>
<script>
var remark_config = {
host: "https://remark42.moorzon.com",
site_id: 'xgoogle',
components: ['embed'],
max_shown_comments: 10,
theme: 'light',
locale: 'zh',
show_email_subscription: false
};
</script>
<script>
(function(c) {
for(var i = 0; i < c.length; i++){
var d = document, s = d.createElement('script');
s.src = remark_config.host + '/web/' +c[i] +'.js';
s.defer = true;
(d.head || d.body).appendChild(s);
}
})(remark_config.components || ['embed']);
</script>
至此,在博客文章页面就可以看到remark42评论区了。
9.自定义remark42显示样式:
为了匹配不同博客页面显示风格,我们可以自定义remark42的样式。Remark42是通过iframe来嵌入到我们博客页面的,不便直接修改它的CSS。这里采用的方法是,通过nginx反代 /web/remark.css 或者 /web/last-comments.css 来指向我们自己的CSS文件。
最好的处理方式当然是保留原css文件在一个不同的路径,然后在我们自己的CSS中可以导入原始版本,在此基础上重载我们想要改变的styles.下面是个例子可以参考:
nginx配置文件添加:
server {
listen 80;
server_name remark42.yourdomain.com;
#...
location = /web/remark.css {
proxy_pass http://gatsby:8000/remark-updated.css;
}
location = /web/last-comments.css {
proxy_pass http://gatsby:8000/last-comments-updated.css;
}
location /web-orig/ {
proxy_pass http://remark42:8080/web/;
}
}
yourdomain.com/remark-updated.css内容:
|
|
yourdomain.com/last-comments-updated.css内容:
|
|
注-参考:
1.Setup a self-hosted commenting system on your blog (jaysinha.me)
2.remark42给博客加个评论功能 • 威远博客,威远工作室,Ease (scwy.net)
4.Zenyet's blog | Hugo添加remark42评论系统 (yequalsx.com)