个人官网hugo+artalk+umami+picgo

个人官网hugo+artalk+umami+picgo

目录

步骤

  1. 使用hugo搭建官网框架
    1. 安装并使用hugo
    2. 选择并使用hugo主题
    3. 我使用的主题
  2. 搭建并使用artalk作为评论系统
    1. 安装artalk
    2. 关联artalk
  3. 搭建并使用umami作为网站数据分析系统
    1. 安装umami
    2. 关联umami（TODO）
  4. 安装并使用图床(picgo+七牛云)
  5. 部署个人官网
    1. 静态网站部署
    2. ssl证书申请及配置

使用hugo搭建官网框架

中文文档

官网

安装并使用hugo

前置条件(依赖)
  • git（源码构建时、Hugo modules功能需要、theme通过git submodule方式安装、记录修改信息、内容托管git仓库）
  • golang（源码构建时、HUgo modules功能需要）
安装
# 方式一: 二进制文件下载
# https://github.com/gohugoio/hugo/releases

# 方式二: 包安装(mac)
$ brew install hugo
创建网站
$ hugo new site <网站目录名称>
启动网站
$ cd <网站目录名称>
$ git init
# 通过git submodule添加主题
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# 使用'ananke'主题
$ echo "theme = 'ananke'" >> hugo.toml
# 启动服务
$ hugo server 

# 构建带草稿文章(文章开头属性draft: true)
$ hugo server -D
$ hugo server --buildDrafts
写文章
# 添加文章 (文章默认会生成到content文件夹中，同时生成文章相关信息--toml、yml、json格式)
$ hugo new content posts/my-first-post.md

选择并使用hugo主题

# 下载所有主题
$ git clone --recursive https://github.com/spf13/hugoThemes.git themes
# 也可以只下载自己想要的主题
$ mkdir themes
$ cd themes
$ git clone URL_TO_THEME

# 编译根目录的hugo.toml，调整theme = '<主题名称>'设置想要引用的主题

我使用的主题

https://themes.gohugo.io/themes/hugoplate/

1. 主题说明

该主题需要用到node构建，并可以直接通过npm实现安装和服务启动，可以直接在这个主题仓库的基础上直接做内容调整

2. 安装及启动(https://github.com/zeon-studio/hugoplate )
$ npm run project-setup
$ npm install
# 启动本地服务
$ npm run dev # 等同于hugo server 可查看package.json
# 构建静态网站(生成public/静态内容)
$ npm run build
3. 了解该主题
  • Hugo.toml – 总配置文件
  • config/_default/ 其他配置信息
    • languages.toml – 语言配置文件
    • menus.*.toml – 主菜单信息配置
    • module.toml – 引入的hugo module模块（目前没改过）
    • params.toml – 其他参数配置
  • assets 样式、资源文件（可以在这里配置自定义样式内容、和其他资源信息）
  • data 静态存储数据json
  • themes/hugoplate – 主题内容
    • layouts – 主题样式和布局（可以通过调整里面的内容修改为自己想要的样式和布局）
4. 我调整过的内容

  1. 总配置（hugo.toml）

    baseURL = "https://catalpalyz.cn"
title = "Catalpa"
timeZone = "Asia/Shanghai"
# 文章列表分页数据
paginate = 4
# 网站默认语言（需要在config/_default/languages.toml文件中配置）
defaultContentLanguage = "zh"

  2. 语言配置(config/_default/languages.toml)

    # 新增简体中文配置，参考content/english目录格式，在content文件夹下复制一份chinese目录，使用zh作为网站语言时会使用该目录下文件作为网站内容
[zh]
languageName = "简体中文"
languageCode = "en-zh"
contentDir = "content/chinese"
weight = 0

  3. 增加中文menu文件，config/_default/menus.zh.toml

  4. 调整及补充参数(config/_default/params.toml)

    # 调整copyright
copyright = "[粤ICP备XXXXX号](https://beian.miit.gov.cn/)"
# 补充artalk参数
[artalk]
server = 'http://artalk.domain.com'
site = 'site_name' # artalk中配置的site名称

  5. 增加头像图片圆形样式 assets/scss/custom.scss

    .circle {
    border-radius: 50%;
}

    themes/hugopate/layouts/about/list.html

    {{ partial "image" (dict "Src" .Params.image "Alt" .Title "Class" "mx-auto mb-6" "Size" "200x200") }}
<!-- 改为(补充cicle的class样式) -->
{{ partial "image" (dict "Src" .Params.image "Alt" .Title "Class" "mx-auto mb-6 circle" "Size" "200x200") }}

搭建并使用artalk作为评论系统

官网

安装artalk

二进制文件方式安装(https://github.com/ArtalkJS/Artalk/releases )
  1. 提取压缩包：tar -zxvf artalk-go_版本号_系统_架构.tar.gz
  2. 运行程序 ./artalk-go server （服务启动为：http://your_domain:23366）
Docker Compose 方式安装

推荐：个人比较推荐用Docker Compose的方式，一个是可以通过docker的方式启动，管理服务方便；而docker-compose在这个基础上，还能帮助你编排服务，个人感触比较深的是，在许久没有关注服务后，再次回来看时，能清晰的看到各项参数，方便管理和调整

version: "3.5"
services:
  artalk:
    container_name: artalk-go
    image: artalk/artalk-go
    ports:
      - 8080:23366
    volumes:
      - ./data:/data

启动容器(具体可以了解docker-compose的使用方式)

docker-compose up -d

控制台

关联artalk

官方说明

Hugo方式(以上面hugoplate主题为例子，这里我没有用模板的方式，也可以参考官网通过模板的方式实现，结果是一样的；另外，原主题已经内嵌disqus评论系统，也可以用原来的评论系统实现，需要调整一下配置参数，具体请自行阅读源码了解)：

// themes/hugoplate/layouts/blog/single.html

<link href="/lib/artalk/Artalk.css" rel="stylesheet">
<script src="/lib/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>

<script>
  new Artalk({
    el:        '#Comments',
    pageKey:   '{{ .Permalink }}',
    pageTitle: '{{ .Title }}',
    server:    '{{ $.Site.Params.artalk.server }}',
    site:      '{{ $.Site.Params.artalk.site }}',
    // ...你的其他配置
  })
</script>

为了同步dark/light主题切换，我在按钮的js处补充了artalk的darkmode开关控制，

// themes/hugoplate/layouts/partials/components/theme-switcher.html
ts.addEventListener("click", ...
// 新增下面这行
    window.artalkInstance.setDarkMode(localStorage.getItem("theme") == 'dark'? true : false)

评论区

搭建并使用umami作为网站数据分析系统

官网

安装umami

docker compose方式安装
---
version: '3'
services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: replace-me-with-a-random-string
    depends_on:
      db:
        condition: service_healthy
    restart: always
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - umami-db-data:/var/lib/postgresql/data
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
      interval: 5s
      timeout: 5s
      retries: 5
volumes:
  umami-db-data:

umami展示

关联umami（TODO， 还未关联）

安装并使用图床(picgo+七牛云)

gitee

github

文档

picgo展示

部署个人官网

静态网站部署

nginx配置

server {
    server_name www.catalpalyz.cn catalpalyz.cn;
    root /disk/public;

    error_log  /var/log/public_error.log warn;
    
    # 其他配置...

	  # 证书配置
    listen 443 ssl; # managed by Certbot
    ssl_certificate /path/to/ssl/fullchain.cer;
    ssl_certificate_key /path/to/ssl/catalpalyz.cn.key;

}
server {
	  # 强制https
    if ($host = catalpalyz.cn) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name catalpalyz.cn;
    listen 80;
    return 404; # managed by Certbot
}

ssl证书申请及配置

个人可使用acme.sh、certbot工具免费生成ssl域名证书。（TODO： 待整理）

也可以使用云服务提供的免费域名证书，具体看各服务商的ssl证书服务。

背景:

  1. 为什么要搭建个人官网？

    • 一直没好好整理一下文档， 经常都是完成任务就结束，就算写了文档也是这里一份，那里一点。其中一个借口就是没有一个好的平台可以做记录（其实有很多好的平台，比如InfoQ、简书、掘金等等；但是，作为一个开发者，怎么能没有自己的网站呢），这一次尝试一下打破这个“平衡”。
    • 希望有一个关于我个人的平台能够收集和展示我的各项成果；

  2. 怎么搭建，要考虑什么？

  • 快速落地： 考虑二次开发，从零开始容易半途而废，因为，没有短期收益，没有短期反馈，目标不具体（虽然前期是博客网站，但总会演变成个人官网，很多东西都可能会放上去）个人经验：除非明确需求细节，不然的话，先有后迭代优化，比一开始就完美实现来得更实际，更容易落地。
  • 前端技术能力有限： 因为主要是后端开发者，从开始工作到现在基本接触的是前后端分离的项目，对前端技术栈了解不多；所以选择较容易入手的框架，静态网站生成器，相比一些功能齐全的动态博客开源项目，主题更丰富，前期内容更简洁，同时可扩展（外链、嵌套等方式）。
  • 选择合适的静态网站生成器： 目前我选择的是hugo，主要亮点，一编译快，二使用Golang符合本人技术栈。
  • 其他的服务：
    • 评论系统：对于评论功能，我目前没有太多的要求，所以没有做详细的技术选型，一开始是看到一些博文介绍用gitalk的，直接使用github issue作为数据存储，比较局限就是评论需要登录github账号，很多做个人网站的博文推荐基本会有一个优点就是省钱，经常能找到一些免费的服务，而我个人因为主攻后端，且有部分运维基础，所以一直都会有一台基础配置的云服务器（阿里云、腾讯云哪个优惠买哪个）在手，所以个人在服务选择方面都是往开源、自建为主，且目前选择的artalk使用golang作为后端服务开发，比较适合目前我的技术栈。后续如果有深入关注这个话题，会先做一次技术选型，看下现有开源/闭源评论系统的优劣对比。
    • 数据分析：用得比较多的是Google Analytics、百度统计，但是本人比较爱折腾，刚好也看到有推荐用umami的，数据也是自托管，所以选择自己搭建umami服务。
    • 图床：静态网站生成器是直接通过本地编写markdown格式文件，然后被转换成html文件的过程，所以媒体（图片、视频等）等资源文件就比较不好操作，网上发现picgo这个工具，感觉比较适合当前的我，能够使用各类云存储服务和github、gitee等来存储资源，简化上传文件的步骤，这样就不需要太多的考虑用什么markdown编辑器编辑了。（本人使用七牛云的对象存储，有10G的免费额度，后续资源过多再考虑用github、gitee等来存储）
标签 :
share(TODO):