Tech

Hello World

My Demo page.

Hexo Demo

此处以Hexo创建GitHub Pages静态页面为例，作为后续技术总结的参考。

创建Github Repo:

  • 默认已经注册有自己的Github账户了；
  • 新建repository: 在仓库名字处，写上username.github.io； 这个username就是自己github注册的名字。例如自己进入自己github的主页时显示为xxx，则新建仓库时名字就为"xxx.github.io"；

配置Git SSH:

  • 在自己电脑本地下载Git，比如Git for Windows；

  • 在Git Bash里面输入：

    1
2

    git config --global user.name "your user name"
git config --global user.email "your github email"

    之后:

    1
2
3

    ssh-keygen -t rsa -C "your github email"
# 之后按照提示操作即可，或者直接三个回车到底
cd ~/.ssh

  • 将.pub文件的内容复制好，进入github的settings页面，点击SSH and GPG keys，新增SSH keys，在key中复制刚刚剪切板的内容；

安装npm和Hexo:

  • 在本地安装npm，如Node.js (nodejs.org)

  • 进入Hexo官网，按照提示在本地希望后续保存博客的路径中，用Git Bash逐个输入：

    1
2
3
4
5

    npm install hexo-cli -g
hexo init your_blog_name
cd your_blog_name
npm install
hexo server

  • 之后，就可以在浏览器中输入：localhost:4000查看本地博客是否成功创建

配置Hexo:

  • 在该博客路径中，打开_config.yml中修改各种信息，可以参考：配置 | Hexo

  • 希望创建新的页面，比如about或者links等，输入:

    1

    hexo new page "about"

    之后在source/about/index.md中进行修改即可

  • 希望创建新的文章，输入：

    1

    hexo new "hello world"

    之后在source/_post中修改对应名字的文章即可

部署Hexo:

  • 要将博客部署在刚刚创建的xxx.github.io中，则打开本地博客的_config.yml，找到deploy处，修改为：

    1
2
3
4

    deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io
  branch: main

  • 之后安装依赖，输入：

    1

    npm install hexo-deployer-git --save

  • 完成后，分别输入以下命令：

    1
2
3

    hexo clean
hexo g # 产生静态文件
hexo d # 自动部署到github.io页面

    等待大概3分钟，即可在https://xxx.github.io里面看到自己的博客内容了。

启动latex渲染：

  • 注意，保持原版不变即可，不需要再在网上查找各种复杂的教程安装各种包；

  • 输入以下命令安装包：

    1

    npm install hexo-filter-mathjax

  • 进入博客的_config.yml，在末尾添加以下内容：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
  packages: # extra packages to load
  extension_options: {}
    # you can put your extension options here
    # see http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options for more detail

  • 之后，对于需要使用latex的文章，在其front-matter处增加mathjax: true，再重新生成和部署博客即可。

    1
2
3
4
5
6

    ---
title: Enable Latex on your article
categories: Example
date: 1905-06-30 12:00:00
mathjax: true
---

公式示例：

  • 行间公式：

    This is a in-line latex demo: $\int^{+\infty}_{-\infty}f(x)dx$

  • 块间公式： $$ { e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n \qquad (1) } $$

安装自定义字体：

  • 如果需要引用google在线字体，可自定于网络搜索；

  • 考虑到很多时候引用网络字体会出现不可预见的情况，因此可以将自己心仪字体的ttf下载下来；

  • 假设下载的字体文件为abc.ttf；

  • 在博客当前所使用的主题路径下:source/css，找到可能的字体文件样式表，如果没有，则自行创建。此次假设该文件叫：style.styl；

  • 将字体文件放在样式路径下面，比如创建source/font目录，并将abc.ttf放在该font目录下；

  • 在style.styl中，新增或修改：

    1
2
3
4
5
6
7
8

    @font-face{
    font-family: 'abc';
    src: url('../font/abc.ttf')
}

body {
    font-family: 'abc';
}

    此处也可以推广，即url可以新增更多字体，也包括网络字体； body中指定的为网页字体渲染的顺序。

  • 然而，在部署到远程服务器上时，有可能存在相对路径错误导致无法看到字体的情况，那么应该结合实际产生的静态文件的路径配置，自行修改src: url('../font/abc.ttf')的地址。

Hexo文章中插入图片：

  • 使用markdown时，插入图片非常方便，但在早期的Hexo中，相关的操作并不友好；

  • 在Hexo 3时代，我们可以通过非常简单的方法完成以前相对繁琐的操作；

  • 首先，确保博客node_modules中有hexo-renderer-marked包，没有则安装：

npm install hexo-renderer-marked –save

1
2
3
4
5
6
7
8


- 之后，在博客的`_config.yml`中修改和新增：

```bash
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

  • 之后使用命令新增文章时，会同时创建同名的资源文件夹，可以在里面放置图片等资源，然后在文章中使用markdown语法插入图片即可，并且只需要指定资源的名字，不用再指定路径，因为它默认在同名的资源文件中查找相关资源。

    1

    ![插入图片](image.jpg)

Hexo总结：

  • 如果需要更改默认主题，则在相关的主题网站查找Hexo主题，按照他们的说明进行下载和修改。一般来说主要经过下载–改名–放入博客theme路径–修改博客_config中的theme选项–修改主题文件的配置 这些流程；

  • 如果需要新建分类：

    1

    hexo new page categories

    之后进入surce/categories/index.md并修改为：

    1
2
3
4
5

    ---
title: categories
date: 2023-05-01 13:47:40
type: "categories"
---

    后续新建文章后，只需要在文章标头中增加categories: 自定义类别名即可

  • 如果需要新建标签：

    同上，无非是将相关的categories改为tags即可。

  • 如果需要对文章显示其摘要：由于大多数主题不支持自定义摘要，因此可以在希望显示的文字后面加上：

    1

    <!-- more -->

  • 本地服务器预览

    1

    hexo s

  • 新建文章

    1
2
3
4
5
6

    hexo n "新文章"
# 新建文章
hexo n page new_page
# 新建页面
hexo new page --path about/me "About me"
# 指定路径新建页面

    此外，文章还可以有很多属性，包括但不限于：

    layout ：page或者post

    title：文章标题

    date：创建日期

    updated：修改日期

    comments ：是否开启评论，默认true

    tags：标签名

    categories：分类名

  • 产生静态文件（假设要部署在自己的服务器上，则需要手动移动静态文件)

    1

    hexo g

  • 清除缓存

    1

    hexo clean

  • 存储草稿

    1

    hexo new draft "new draft"

    该命令会生成source/_draft/new-draft.md，这些文章不会被发表，不会被链接查看到，可以当作自己撤销的、临时的或者私密的文章来用。

  • 部署博客

    1
2
3

    hexo d
hexo clean && hexo d
# 一般可以用组合命令

Hugo Demo

后续若有新增，将会于此补充

Official
个人博客，请勿转载。Personal blog, please do not repost.
© 2019 - 2024 abel's blog
Built with Hugo
Theme Stack designed by Jimmy