搭建Emacs写博客环境

前言

之前在2020年的时候把博客搭建起来了，然后写了第一篇博客，然后过了4年借着学习Emacs的机会，重新把博客拾起来。下面是整个过程，趟了很多坑，这次一一都记录下来，防止后续又忘记了。

搭建过程

原博客底子

虽然2020年按照文档搭建博客的时候，写了本博客的第一篇文章，奈何当时写的太简单了，很多细节都没有记录现在虽努力回想，也把引用的文章又看了一遍，感觉也对应不上。但是流程还能跑通，主题也挺好看的，就那样吧，最主要还是内容的产出。

简单记录一下原博客的搭建情况

通过一个private repository维护了博客的原始md文件(也不知道为啥要设置成private)
原始博客hugo主目录下的public目录，对应username.github.io仓库
通过修改原始md文件，然后调用hugo命令生成静态文件到public目录，然后推送到username.github.io仓库
运行仓库中的Github Action: pages build and deployment，编译生成博客文章

整合Emacs

自从开始学习Emacs之后，就想着把所有能迁移的流程都迁移到Emacs上来，那第一个能双向促进的就是写博客和使用Emacs，所以就有了这篇文章但是一开始折腾就停不下来了，想着搭建一个尽善尽美的写作环境，感觉又偏离内容输出第一位的原则了。

目录结构

由于要兼容原博客的底子，就没有按照目前主流的gh-pages分支的做法，自己通过git submodule作了一下整合，也能跑通

博客原始org文件

git clone git@github.com:goldenages1989/blogorg.git ~/Hugo/blog

博客gh-pages

git submodule add git@github.com:goldenages1989/goldenages.github.io.git ~/Hugo/blog/public

主题theme

原博客用的是even主题，但是随着hugo的升级，有些地方不兼容了，找了一下issue，发现一位好心人修改的even兼容版本
```
git submodule add git@github.com:guixian001/hugo-theme-even-v2.git ~/Hugo/blog/themes/even
```
通过上述的目录结构，可以实现几个模块的同步，不管了，能跑起来就行，重要的是内容的输出

ox-hugo

有了博客的框架，再学了一会orgmode的语法，就可以开始愉快的写博客了，写了一会发现要预览结果需要各种在Emacs和Shell之间切换，太麻烦了就又一顿搜索，发现了ox-hugo，整上后确实好用，不用到处切换了，自己在后台默默处理完成。

安装ox-hugo

(use-package ox-hugo
        :straight t
        :after (ox org-mode))

配置后台自动转换在blog目录下新建一个`.dir-locals.el`文件，里面的内容是
```
((org-mode . ((eval . (org-hugo-auto-export-mode)))))
```
我的目录结构如下所示:

其中:
1. content是ox-hugo生成的md文件的内容，在子目录post下
2. orgblog是org源文件的目录
3. public刚才说了是gh-pages内容
  
  通过上述设置即可在保存org的时候自动生成md文件，然后hugo命令进行预览并推送到github
ox-hugo常用配置
```
#+HUGO_BASE_DIR: ~/Hugo/blog/
#+hugo_front_matter_format: yaml
#+hugo_auto_set_lastmod: t
#+HUGO_SECTION: post
#+TOC: headlines 2
#+FILETAGS: :Emacs:blog:
#+author:
#+hugo_custom_front_matter: :author "glz"
#+TITLE:$1
```
参数释义
1. HUGO_BASE_DIR: 博客站点根目录，即hugo new site生成的目录
2. HUGO_SECTION: 博客文件存在的子目录
3. HUGO_PUBLISHDATE: 博客发布的时间
4. TOC: headlines 2 生成的目录层级
5. FILETAGS: 标签
6. hugo_auto_set_lastmode: 自动更新博客的修改时间

使用 M-x org-hugo-export-to-md 之后会在 <HUGO_BASE_DIR>/content/<HUGO_SECTION>/<EXPORT_HUGO_BUNDLE> 目录下创建 <EXPORT_FILE_NAME>.md 文件

问题在配置的过程中发现一个org转md之后，hugo编译报错的问题: execute of template failed: template: partials/head.html:13:72: executing "partials/head.html" at <safeHTML>: error calling safeHTML: unable to cast []string{"glz"} of type []string to string 原因是: org的author配置是数组，而hugo的template里面配置的是字符串，会转换出错 解决方法: 在上述hugo配置中增加
```
#+author:
#+hugo_custom_front_matter: :author "FirstName LastName"
```

yasnippet

由于每次新增博客，新建org都需要配置上述hugo配置，所以通过yasnippet来快速插入

安装

     (use-package yasnippet
  :ensure t
  :config
  (yas-global-mode 1))

(use-package yasnippet-snippets
  :ensure t
  :after yasnippet)

配置snippet

1. M-x yas-new-snippet
2. 选择对应的mode，一般提示的即可
3. 填入name,key,content保存C-c C-c
4. 在要插入的文件中，key<Tab>插入

常规snippet示例

# -*- mode: snippet -*-
# name: Angular component
# key: comp
# --

带Tabstops示例

     # -*- mode: snippet -*-
# name: Angular component
# key: comp
# --
import { Component } from '@angular/core';

@Component({
  selector: 'app-$2',
  styleUrls: ['$3.component.scss'],
  $0
})

export class $1Component {}

org-download

针对博文中要插入图片，推荐用org-download，直接从finder里拖入即可

安装

    ;;org-download
(require 'org-download)
;; Drag-and-drop to `dired`
(add-hook 'dired-mode-hook 'org-download-enable)

配置图片的显示大小 =注意:目前只支持设置width，不支持修改height=

(setq org-image-actual-width nil)
图片前加入
#+ATTR_ORG: :width 100px   //原文中
#+ATTR_HTML: :width 100px  //导出的html

博客美化

字体

参照大神的字体修改的文章进行修改，even主题的样式文件路径不太一样，全局搜索一下字体的配置即可