Hugo on Xizi's Blog

PaperMod主题添加valine评论

Sun, 18 Aug 2024 16:55:56 +0800

Valine 一款快速、简洁且高效的无后端评论系统。服务端可以借助LeanCloud免费部署到Vercel 部署 (服务端)

配置Valine

注册LeanCloud 账号：

进入 LeanCloud 官网注册一个国际账号。
创建一个新的应用以便使用 LeanCloud 提供的后端服务。

在Vercel 部署 (服务端)

关联github账号登陆，创建Valine应用，名称任意,例如Valine

获取 Valine App ID 和 App Key：

在 LeanCloud 控制台中，进入你创建的应用。
在左侧导航栏中找到“设置”选项。
在应用凭证部分，复制 App ID、App Key、REST API 服务器地址

在Vercel的应用中依次进入【settings】、【environment-variables】添加上面获取的环境变量LEAN_KEY与LEAN_ID值。然后进入【deployments】【Redeploy】重新部署生效。

完成后会自动分配一个二级域名,类似xxx-xxx-xxxx-projects.vercel.app【可选】进入【settings】【domains】绑定自己的域名

评论通知的环境设置在在进入leancloud应用的Play=== CLIENT ENGINE === 设置 添加自定义环境变量 【Redeploy】重新部署生效。

valine评论数据管理

点击Visit打开进入https://xxx-xxx-xxxx-projects.vercel.app 是一个独立的网页单面。在域名后边加上/ui/register注册，默认首次注册的用户是为评论管理员，可以删除评论等操作,也可以进入LeanCloud的控制台找到数据存储=>结构化数据=>Comment,在这里你可以对评论的数据进行管理

在Hugo主题中引入Valine

以PaperMod主题为例，找到需要添加Valine的页面或模板文件，以下方法二选一

方法一：在~/themes/PaperMod/layouts/_default/single.html添加以下代码

复制替换 LeanCloud 控制台中的【设置】【应用凭证】的App ID、App Key、REST API 服务器地址值

<div id="comments"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: '#comments',
    appId: 'App-ID',
    appKey: 'App-Key',
    serverURLs: "REST API 服务器地址",
    placeholder: '说点什么吧...',
  });
</script>

方法二：修改~/themes/PaperMod/layouts/partials/comments.html的内容如下

利用Travis CI和Hugo將Blog自動部署到Github Pages

Sun, 20 Jan 2019 01:37:56 +0800

個人Blog採用靜態Blog形式託管在[Github][github]上。此前使用的是[Hexo][hexo]，因其包依賴關係複雜，部署流程繁瑣，故將整個部署環境封裝到Docker鏡像中以實現快速部署，但仍較爲繁瑣。現轉用執行速度快、操作簡便的[Hugo][hugo]。本文記錄如何在GNU/Linux中通過[Travis CI][travisci]將[Hugo][hugo]生成的Blog內容自動同步到[Github][github]，實現持續集成、部署。

转载自利用Travis CI和Hugo將Blog自動部署到Github Pages

官方文檔

本文中的相關操作皆以官方文檔爲操作依據

Github
Hugo
- Host on GitHub
Travis CI
- [GitHub Pages Deployment][travisci-github-page]
- Building a Python Project
- Best Practices in Securing Your Data
- Customizing the Build

GitHub Pages 限制

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

静态网站生成器hugo安装配置主题

Thu, 19 Jul 2018 01:37:56 +0800

install-hugo

下载Hugo 对应平台解压得到二进制文件

Linux安装hugo

以64bit为例，此安装方法适用于debian ubuntu centos openwrt等X64位的系统

wget https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_0.54.0_Linux-64bit.tar.gz
tar zxvf hugo_0.54.0_Linux-64bit.tar.gz
mv hugo /usr/bin/hugo

Windows安装hugo

下载hugo_extended_0.54.0_Windows-64bit.zip 并解压缩

C:\Hugo\bin
 - hugo.exe
 - LICENSE
 - README.md

添加到PATH

set PATH=%PATH%;C:\Hugo\bin

验证是否安装成功

hugo version

能看到Hugo版本号说明已经成功安装好了hugo

C:\Hugo>set PATH=%PATH%;C:\Hugo\bin

C:\Hugo>hugo version
Hugo Static Site Generator v0.54.0/extended windows/amd64 BuildDate: unknown

C:\Hugo>

Hugo新建网站

使用以下命令新建站点

hugo new site blog

Hugo会自动新建名为blog的文件夹

C:\HUGO\BLOG
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes

文件夹描述相关

archetypes使用hugu new post生成新文章的模板，可以自定义里面的值
content 存放网站内容
data 存储Hugo在生成您的网站时可以使用的配置文件
layouts 以.html文件的形式存储模板，指定如何将内容的视图呈现到静态网站中
static 存储所有静态内容：图像，CSS，JavaScript等，当Hugo构建您的站点时，静态目录中的所有资产都将按原样复制
themes 存放主题
config.toml 配置文件

进入blog的文件夹