MyHomeLab：5-在docker中安装hexo

5-在docker中安装hexo

[toc]

安装

docker run -it \
--name hexo \
-p 4000:4000 \
-v /data/hexo:/home/hexo/.hexo \
--restart always \
taskbjorn/hexo

使用

在第一次运行时，容器在/home/hexo/.hexo. 然后通过hexo-server在容器端口上运行的集成 Web 服务器提供静态页面4000。如果预先填充的卷安装在/home/hexo/.hexo，则不会初始化新站点，而是提供卷的预先存在的内容。

要使用 Hexo，您可以在 Docker 容器中运行如下命令：

docker exec my_hexo_container hexo <command>

您可以在Hexo 官方文档的命令页面上找到可用命令的列表。

或者，您可以打开一个交互式 shell，它将从您博客的根目录开始，并让您直接访问以下hexo命令：

docker exec -it my_hexo_container sh
hexo generate

创建一个定制化主题的hexo镜像

dockerFile如下：（非最终版，自定义主题后的最终dockerFile在后面）

# node环境镜像
FROM node:17-alpine3.14 AS build-env
# 把git装上
RUN apk add --no-cache git
# 安装 hexo
RUN npm install hexo-cli -g
RUN mkdir -p /usr/src/hexo-blog
WORKDIR /usr/src/hexo-blog
# 生成静态文件
RUN hexo init
# 修改配置文件中的主题
RUN sed -i '100,100s/landscape/butterfly/g' _config.yml
# 下载主题
RUN npm i hexo-theme-butterfly
# 安装插件
RUN npm install hexo-renderer-pug hexo-renderer-stylus -g

docker image build -t alfredhexo:latest .

hexo-theme-butterfly主题自定义

创建标签页

在hexo根目录下创建./source/tags/index.md文件并写入响应内容

RUN echo \
$'\
---\n\
title: 标籤\n\
created: 2022-01-01 00:00:00\n\
type: "tags"\n\
---\n\
' \
> ./source/tags/index.md

创建分类页

在hexo根目录下创建./source/categories/index.md文件并写入响应内容

RUN echo \
$'\
---\n\
title: 标籤\n\
created: 2022-01-01 00:00:00\n\
type: "categories"\n\
---\n\
' \
> ./source/categories/index.md

最终dockerFile

# node环境镜像
FROM node:current-alpine3.19 AS build-env
# 换清华的apk源
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
# 把git装上
RUN apk add --no-cache git
# 安装 hexo
RUN npm install hexo-cli -g
RUN mkdir -p /usr/src/hexo-blog
WORKDIR /usr/src/hexo-blog
# 生成静态文件
RUN hexo init
# 删除默认的HelloWorld
RUN rm -f ./source/_posts/hello-world.md 
# 覆盖hexo配置文件
COPY ./_config.yml _config.yml
 
# 创建主题标签页
RUN mkdir -p ./source/tags/
RUN echo \
$'\
---\n\
title: 标签\n\
created: 2022-01-01 00:00:00\n\
type: "tags"\n\
---\n\
' \
> ./source/tags/index.md
# 创建主题分类页
RUN mkdir -p ./source/categories/
RUN echo \
$'\
---\n\
title: 分类\n\
created: 2022-01-01 00:00:00\n\
type: "categories"\n\
---\n\
' \
> ./source/categories/index.md
# 下载主题
RUN npm i hexo-theme-butterfly
# 覆盖主题配置文件
COPY ./butterfly_config.yml node_modules/hexo-theme-butterfly/_config.yml
# 安装插件
RUN npm install hexo-renderer-pug hexo-renderer-stylus -g

hexo配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
 
# Site
title: Alfred的小站
subtitle: ''
description: ''
keywords:
author: Alfred
language: zh-CN
timezone: ''
 
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://alfredty.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
 
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
 
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
 
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
 
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
 
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
 
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'
 
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
 
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
 
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
 
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''
 

butterfly配置文件

# Main menu navigation (導航目錄)
# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
# --------------------------------------
 
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart
 
# Code Blocks (代碼相關)
# --------------------------------------
 
highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false
 
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true
  copyright:
    enable: false
    limit_count: 50
 
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
  fab fa-github: https://github.com/YuAlfred || Github
  fas fa-envelope: alfred.y.tang@outlook.com || Email
  # fab fa-github: https://github.com/xxxxx || Github
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email
 
# search (搜索)
# --------------------------------------
 
# Algolia search
algolia_search:
  enable: false
  hits:
    per_page: 6
 
# Local search
local_search:
  enable: false
 
# Math (數學)
# --------------------------------------
# About the per_page
# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
 
# MathJax
mathjax:
  enable: false
  per_page: false
 
# KaTeX
katex:
  enable: false
  per_page: false
  hide_scrollbar: true
 
# Image (圖片設置)
# --------------------------------------
 
# Favicon（網站圖標）
favicon: /img/favicon.png
 
# Avatar (頭像)
avatar:
  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  effect: false
 
# Disable all banner image
disable_top_img: false
 
# The banner image of home page
index_img:
 
# If the banner of page not setting, it will show the top_img
default_top_img:
 
# The banner image of archive page
archive_img:
 
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:
 
# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:
 
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:
 
# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:
 
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    - https://img.alfredty.com/img/20220118000557.jpg
    - https://img.alfredty.com/img/20220117235921.jpg
    - https://img.alfredty.com/img/20220118000153.png
    - https://img.alfredty.com/img/20220118000106.jpg
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
 
# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg
 
# A simple 404 page
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
 
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字
 
# wordcount (字數統計)
wordcount:
  enable: false
  post_wordcount: true
  min2read: true
  total_wordcount: true
 
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config
 
# anchor
# when you scroll in post, the URL will update according to header id.
anchor: false
 
# Post
# --------------------------------------
 
# toc (目錄)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
 
post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
 
# Sponsor/reward
reward:
  enable: false
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: wechat
    # - img: /img/alipay.jpg
    #   link:
    #   text: alipay
 
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:
 
# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日
 
# figcaption (圖片描述文字)
photofigcaption: false
 
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1
 
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 500 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.
 
# Share System (分享功能)
# --------------------------------------
 
# AddThis
# https://www.addthis.com/
addThis:
  enable: false
  pubid:
 
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq
 
# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
 
# Comments System
# --------------------------------------
 
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use: # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
 
# disqus
# https://disqus.com/
disqus:
  shortname:
  apikey: # For newest comments widget
 
# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname:
  apikey:
  option:
 
# livere (來必力)
# https://www.livere.com/
livere:
  uid:
 
# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id:
  client_secret:
  repo:
  owner:
  admin:
  option:
 
# valine
# https://valine.js.org
valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:
 
# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
  serverURL: # Waline server address url
  bg: # waline background
  visitor: false
  option:
 
# utterances
# https://utteranc.es/
utterances:
  repo:
  # Issue Mapping: pathname/url/title/og:title
  issue_term: pathname
  # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark
 
# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
  app_id:
  user_id: # optional
  pageSize: 10 # The number of comments to show
  order_by: social # social/time/reverse_time
  lang: en_US # Language en_US/zh_CN/zh_TW and so on
 
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId:
  region:
  visitor: false
  option:
 
# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:
 
# Chat Services
# --------------------------------------
 
# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: false
 
# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: false
 
# chatra
# https://chatra.io/
chatra:
  enable: false
  id:
 
# tidio
# https://www.tidio.com/
tidio:
  enable: false
  public_key:
 
# daovoice
# http://daovoice.io/
daovoice:
  enable: false
  app_id:
 
# gitter
# https://gitter.im/
gitter:
  enable: false
  room:
 
# crisp
# https://crisp.chat/en/
crisp:
  enable: false
  website_id:
 
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  copyright: true # Copyright of theme and framework
 
# Analysis
# --------------------------------------
 
# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics:
 
# Google Analytics
# https://analytics.google.com/analytics/web/
google_analytics:
 
# CNZZ Analytics
# https://www.umeng.com/
cnzz_analytics:
 
# Cloudflare Analytics
# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:
 
# Microsoft Clarity
# https://clarity.microsoft.com/
microsoft_clarity:
 
# Advertisement
# --------------------------------------
 
# Google Adsense (谷歌廣告)
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true
 
# Insert ads manually (手動插入廣告)
# ad:
#   index:
#   aside:
#   post:
 
# Verification (站長驗證)
# --------------------------------------
 
site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx
 
# Beautify/Effect (美化/效果)
# --------------------------------------
 
# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!
 
# theme_color:
#   enable: true
#   main: "#49B1F5"
#   paginator: "#00c4b6"
#   button_hover: "#FF7242"
#   text_selection: "#00c4b6"
#   link_color: "#99a9bf"
#   meta_color: "#858585"
#   hr_color: "#A4D8FA"
#   code_foreground: "#F47466"
#   code_background: "rgba(27, 31, 35, .05)"
#   toc_color: "#00c4b6"
#   blockquote_padding_color: "#49b1f5"
#   blockquote_background_color: "#49b1f5"
#   scrollbar_color: "#49b1f5"
 
# The top_img settings of home page
# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:
 
# The user interface setting of category and tag page (category和tag頁的UI設置)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 默認跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index
 
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background:
 
# Footer Background
footer_bg: false
 
# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
rightside-bottom:
 
# Enter transitions (開啓網頁進入效果)
enter_transitions: true
 
# Background effects (背景特效)
# --------------------------------------
 
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false
 
# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: false
  mobile: false
 
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false
 
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false
 
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false
 
# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: false
  mobile: false
 
# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false
 
# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: light
 
# Beautify (美化頁面顯示)
beautify:
  enable: false
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'
 
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family:
  code-font-family:
 
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link:
  font-family:
 
# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
  enable: true
  icon: # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:
 
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
 
# Loading Animation (加載動畫)
preloader: false
 
# aside (側邊欄)
# --------------------------------------
 
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
 
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true
 
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date:
 
# Aside widget - Newest Comments
newest_comments:
  enable: false
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
 
# Bottom right button (右下角按鈕)
# --------------------------------------
 
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: false
  # The text of a button
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '簡'
 
# Read Mode (閲讀模式)
readmode: true
 
# dark mode
darkmode:
  enable: true
  # Toggle Button to switch dark/light mode
  button: true
  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
  # autoChangeMode: false
  autoChangeMode: false
 
# Don't modify the following settings unless you know how they work (非必要請不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重複
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment
 
# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)
 
# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false
 
# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true
 
# Tag Plugins settings (標籤外掛)
# --------------------------------------
 
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: false
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
 
# Note (Bootstrap Callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
 
# other
# --------------------------------------
 
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: false
  exclude:
    # - xxxx
    # - xxxx
 
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: false
  per_page: true
 
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: false
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode
 
# https://instant.page/
# prefetch (預加載)
instantpage: false
 
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: false
  field: site # site/post
 
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: false
  field: site # site/post
  placeholder:
  blur: false
 
# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
# pwa:
#   enable: false
#   manifest: /pwa/manifest.json
#   apple_touch_icon: /pwa/apple-touch-icon.png
#   favicon_32_32: /pwa/32.png
#   favicon_16_16: /pwa/16.png
#   mask_icon: /pwa/safari-pinned-tab.svg
 
# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true
 
# Add the vendor prefixes to ensure compatibility
css_prefix: true
 
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
 
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # main
  main_css:
  main:
  utils:
 
  # pjax
  pjax:
 
  # comments
  gitalk:
  gitalk_css:
  blueimp_md5:
  valine:
  disqusjs:
  disqusjs_css:
  utterances:
  twikoo:
  waline:
  giscus:
 
  # share
  addtoany:
  sharejs:
  sharejs_css:
 
  # search
  local_search:
  algolia_js:
  algolia_search_v4:
  instantsearch_v4:
 
  # math
  mathjax:
  katex:
  katex_copytex:
  katex_copytex_css:
  mermaid:
 
  # count
  busuanzi:
 
  # background effect
  canvas_ribbon:
  canvas_fluttering_ribbon:
  canvas_nest:
 
  lazyload:
  instantpage:
  typed:
  pangu:
 
  # photo
  fancybox_css_v4:
  fancybox_v4:
  medium_zoom:
 
  # snackbar
  snackbar_css:
  snackbar:
 
  # effect
  activate_power_mode:
  fireworks:
  click_heart:
  ClickShowText:
 
  # fontawesome
  fontawesome:
 
  # Conversion between Traditional and Simplified Chinese
  translate:
 
  # flickr-justified-gallery
  flickr_justified_gallery_js:
  flickr_justified_gallery_css:
 
  # aplayer
  aplayer_css:
  aplayer_js:
  meting_js:
 
  # Prism.js
  prismjs_js:
  prismjs_lineNumber_js:
  prismjs_autoloader:
 

dockerFile

此处基于上面自己创建的定制化hexo镜像进行后续操作

# node环境镜像
FROM alfredhexo:latest AS build-env
# 将hexo-blog文件夹设置成工作文件夹
WORKDIR /usr/src/hexo-blog/source/_posts
# 复制当前文件夹下面的所有文件到_posts中
COPY ./笔记 .
# 编译博客为静态文件
RUN hexo clean && hexo g
 
# 配置nginx
FROM nginx:latest
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /usr/share/nginx/html
# 把上一部生成的HTML文件复制到Nginx中
COPY --from=build-env /usr/src/hexo-blog/public /usr/share/nginx/html
EXPOSE 80 443

.gitlab-ci.yml

注意有个比较坑的点，虽然设置了-v，但是没用，其实是mount了一个目录，从cicd的日志能看到是/var/lib/docker/volumes/cicd-hexo-data/_data，要改什么配置文件去这儿改就好了

image: docker:git
services:
- docker:dind
 
stages:
  - deploy
 
docker-deploy:
  stage: deploy
  # 执行Job内容
  script:
    # 通过Dockerfile生成cicd-demo镜像
    - docker build -t cicd-hexo .
    # 删除已经在运行的容器
    - - if [ $(docker ps -aq --filter name=cicd-hexo) ]; then docker rm -f cicd-hexo;fi
    # 通过镜像启动容器，并把本机11080端口映射到容器80端口，把配置文件映射出来方便修改
    - docker run -d -p 11080:80 -p 11443:443 --restart always -v /data/myhexo/nginx/conf.d/nginx.conf:/etc/nginx/nginx.conf -v /data/myhexo/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf -v /opt/docker/nginx/cert:/etc/nginx --name cicd-hexo cicd-hexo
#   不指定执行Job的服务器，使用默认Runner
#   tags:
  # only:
    # 只有在master分支才会执行
    # - master

通过此CI/CD文件即可实现push后自动部署

ngix https

由于最终网站是放到nginx下面的，所以按照nginx的配置增加ssl就可以啦

/var/lib/docker/volumes/cicd-hexo-data/_data/conf.d/default.conf

 
server {
#SSL 默认访问端口号为 443
listen 443 ssl;
#请填写绑定证书的域名
server_name alfredty.com; 
#请填写证书文件的相对路径或绝对路径
ssl_certificate  /etc/nginx/alfredty.com_bundle.crt; 
#请填写私钥文件的相对路径或绝对路径
ssl_certificate_key /etc/nginx/alfredty.com.key; 
ssl_session_timeout 5m;
#请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#请按照以下协议配置
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
location / {
#网站主页路径。此路径仅供参考，具体请您按照实际目录操作。 
#例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
root /usr/share/nginx/html;
index index.html index.htm;
}
}
 
server {
listen 80;
#请填写绑定证书的域名
server_name alfredty.com; 
#把http的域名请求转成https
return 301 https://$host$request_uri; 
}