十分钟助你搭建Github静态博客

最近爱上了这种极简主题的博客，但是用服务器搭建感觉没意思（况且换服务器了的话又是一个转移任务），所以想到了期待已久的github.io，反正极简风格插图的话并不好看，倒是特别适合写一些文章（写作水平稀碎，多半会gu）。所以花了一下午尝试了一下，效果还不错，最后又花了1h撸了这个教程，算半个造轮子吧，因为还是有一点点坑存在的...

话不多说，首先你需要拥有如下设备

一个能运行docker容器的设备
一个GitHub账号
会写md文档

演示界面

ok首先使用docker容器拉取hexo博客容器

如果设备仅仅用来搭建hexo博客并上传到GitHub，可以不用使用docker容器，使用docker容器是为了避免环境污染。仅搭建hexo博客的化去官网即可，最后可以参考hexo上传到GitHub的方法。

docker安装方法参考
使用其他大佬的一键命令安装

curl -sS -O https://kejilion.pro/kejilion.sh && chmod +x kejilion.sh && ./kejilion.sh

==以下操作如果输入错误，可以输入列表不存在的数字回车即可重输==

弹出如下界面，依次选择 6 => 8 => y 完成docker的换源以及安装==安装失败选择官方源两次==

首先cd到你一个指定目录，比如/home/ubt/docker下创建文件夹hexo用于存放docker容器

其中，docker-compose.yaml的内容如下：

version: '3'
services:

  hexo:
    container_name: hexo
    image: hub.rat.dev/bloodstar/hexo:latest
    hostname: hexo
    ports:
      - "7800:4000"
    volumes:
      - ${USERDIR}/hexo/blog:/app
    env_file:
      - .env  # 部分公用环境变量放到这里，以使得多个docker之间共享环境变量
    environment:
      - PUID=${PUID}
      - PGID=${PGID}
      - TZ=${TZ}
      - GIT_USER="yourName"
      - GIT_EMAIL="youID@gmail.com"
      
      # 主要为了内部npm网络访问顺利
      # - HTTP_PROXY=http://192.168.0.100:1089
      # - HTTPS_PROXY=http://192.168.0.100:1089
    restart: always

.env文件示例

PUID=1000
PGID=1000
TZ="Asia/Shanghai"
USERDIR="/home/ubt/docker/hexo"

环境变量	作用
HEXO_SERVER_PORT	pm2 http 服务器运行端口，默认是4000
GIT_USER	git 环境变量用户名
GIT_EMAIL	git 环境变量邮箱

两个文件创建好后使用命令拉取docker容器

docker compose up -d

编辑hexo博客框架

如果拉取成功后应该会在docker-compose.yaml同级目录下有hexo文件，这个即你的blog
首先进行主题的拉取，cd到hexo/blog/themes下，将你中意的主题使用git命令下载，我这里就以我稀罕de主题为例jylzs369/hexo-theme-lagom

git clone https://github.com/jylzs369/hexo-theme-lagom.git

git后会有hexo-theme-lagom目录，名字稍后会用到，按照GitHub中这个主题提示进行操作，返回到blog目录
修改文件_config.yml，同样的其他内容按需修改

theme: hexo-theme-lagom

紧接着，进入容器内，进入后操作与hexo一样

docker exec -it hexo bash

创建三个新页面

hexo new page about
hexo new page categories
hexo new page tags

创建结束后，使用命令查看ssh key 部署到GitHub

# 查看密钥并复制
cat .ssh/id_rsa.pub

详细教程

将SSH 公钥复制到剪贴板。 ...
在任何页面的右上角，单击您的个人资料照片，然后单击Settings（设置）。
在用户设置侧边栏中，单击SSH and GPG keys（SSH 和GPG 密钥）。
单击New SSH key（新SSH 密钥）或Add SSH key（添加SSH 密钥）。
部署成功后，点击头像旁边的+选择New repository新建仓库
name中填写格式：xxx.github.io xxx为你指定的名字
Create repository，弹出仓库指令
来到hexo容器内（退出容器编辑比较方便），编辑_config.yml文件，找到如下内容，复制，xxx修改为你自己的仓库地址，在刚刚新建仓库页面选择SSH即可看到

deploy:
  type: git
  repository: git@github.com:xxxxx/xxxx.github.io.git
  branch: master

保存后继续docker进入容器内部

docker exec -it hexo bash

使用三连(一blog大佬中看到的解释，挺好玩的)指令

hexo clean
hexo g
hexo d

不出意外此时的GitHub中已有hexo内容，接下来来到仓库选择Setting，按照如图设置后save，等待一会就像蓝色箭头处的链接，blog到此创建成功

附录

我自己的config文件
_config.yml

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

  

# Site

title: Sheetung's blog

subtitle: ''

description: ''

keywords:

author: sheetung

language: en

timezone: ''

  

# URL

## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

url: https://sheetung.github.io

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

about_dir: about

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

syntax_highlighter: highlight.js

highlight:

  line_number: true

  auto_detect: false

  tab_replace: ''

  wrap: true

  hljs: false

prismjs:

  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: hexo-theme-lagom

  

# Deployment

## Docs: https://hexo.io/docs/one-command-deployment

deploy:

  type: git

  repository: git@github.com:sheetung/sheetung.github.io.git

  branch: master

hexo主题中的config !!!两个config不一样，主题中的请根据不同主题要求自行修改

##################################################

# 内容 CONTENT

##################################################

  

# 页面标题

page_title: Sheetung blog

  

# 配置导航菜单 MENU

# 通过key引用链接进行跳转，目前支持中英文

menu:

  home: /

  archives: /archives/

  categories: /categories/

  tags: /tags/

  about: /about/

  

# 配置社交平台链接 SOCIAL LINKS

social_links:

  github:

    link: https://github.com/sheetung

    icon: '&#xe6b7;'

  mail:

    link: mailto:sheetung@cutech.space

    icon: '&#xe61a;'

  rss:

    link: /atom.xml

    icon: '&#xe640;'

  

# 配置主页模板 INDEX TEMPLATE

# 选项:

#   - show_all_posts: 是否展示所有文章

#   - post_count: 是否仅显示N篇文章

#   - sort_updated: 是否按更新时间排序/否则通过创建时间排序

index:

  show_all_posts: false

  post_count: 5

  sort_updated: false

  

# 配置归档模板 ARCHIVE TEMPLATE

# 选项:

#   - sort_updated: 是否按更新时间排序/否则通过创建时间排序

archive:

  sort_updated: false

  

# 配置文章模板 POST TEMPLATE

# 选项:

#   - show_updated: 展示修改时间

post:

  show_updated: true

  

# 配置版权 COPYRIGHT

# end_year未设置则默认设置当前年份

copyright:

  neme: Sheetung

  start_year: 2024

  end_year:

  

##################################################

# 外观 APPEARANCE

##################################################

  

# 配置网站图标 FAVICON

# 支持以下三端：

#   - desktop:  favion.ico

#   - android: 192x192 PNG

#   - apple:  180x180 PNG

# 在线生成工具： https://www.favicon.cc/

favicon:

  desktop:

    url: /images/favicon.ico

  android:

    url: /images/favicon-android.png

  apple:

    url: /images/favicon-apple.png

  

##################################################

# 插件 PLUGINS

##################################################

  

# 配置评论模块 COMMENTS

valine:

 appid: '' #Leancloud应用的appId

 appkey: '' #Leancloud应用的appKey

 placeholder: ''  #评论框占位符

 visitor: true  #阅读量统计

  

# 配置谷歌分析 GOOGLE ANALYSIS

google_analytics:

  enabled: false

  id: ''

  

# 配置百度分析 BAIDU ANALYSIS

baidu_analytics:

  enabled: false

  id: ''

常用命令

hexo server #启动本地服务器，用于预览主题。Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
hexo server -s #以静态模式启动
hexo server -p 4000 #更改访问端口 (默认端口为 5000，’ctrl + c’关闭 server)
hexo server -i IP地址 #自定义 IP
hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的 public 文件夹
hexo g #生成静态网页 (执行 $ hexo g后会在站点根目录下生成 public 文件夹, hexo 会将”/blog/source/“ 下面的.md 后缀的文件编译为.html 后缀的文件,存放在”/blog/public/ “ 路径下)
hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)
hexo init 文件夹名称 #初始化 XX 文件夹名称
npm update hexo -g#升级
npm install hexo -g #安装
node -v #查看 node.js 版本号
npm -v #查看 npm 版本号
git --version #查看 git 版本号
hexo -v #查看 hexo 版本号
hexo new page “music” #新增页面music
hexo new post “文章名称” #新增文章

有关lagom主题的bug

完美解决hexo下分类和标签无法显示的问题 · Issue #2 · Mrcxt/blog (github.com)
概述
今天更换了一个新的主题，之后发现无法正常添加分类页和标签页，经过一下午的研究，终于找到了最完美的解决方案。

解决方案
步骤一

你需要在 hexo 根目录的 source 文件夹下新建一个 tags 文件夹，然后在 tags 文件夹里面新建一个 index.md 文件。快捷命令为：

$ hexo new page "tags"

步骤二

编辑 index.md 文件，内容如下：

---
title: "tags"
type: tags
layout: "tags"
---

重点来了

注意！这里面最重要的就是 layout 选项，后面的参数对应的是你主题文件夹下 layout 文件夹下第一级的布局文件。比如，我的主题是用 ejs 写的，那么对应的就是 layout/tags.ejs，如果没有，那么就会出现空白的现象！如果你的 tags 文件的命名时 a.ejs，那么你就应该写成 layout: "a"。

步骤三

编辑主题配置文件:

nav:
  home: /
  about: /about
  tags: /tags

步骤四

编辑 hexo 配置文件 Directory 选项。

检查一下名称是否对应

# Directory
tag_dir: tags

至此，完美解决。

本文作者：sheetung
本文链接：https://cutech.space/archives/githubio.html
版权声明：转载时须注明出处（包括原作者和文章链接）及本声明

blog hexo

评论填写真实邮箱才可以收到提醒
与本文无关的评论请到留言区哦

已有 8 条评论

test

2024-10-06 14:33

0 1

测试9通过

Sheetung 回复 @test

1 0

通过

test 回复 @Sheetung

2024-10-06 14:37

谢谢

HelloGakki

2024-09-23 15:51

博主真是太厉害了！！！(别屏蔽我

Sheetung 回复 @HelloGakki

2024-09-23 18:50

大佬别闹，那小子ip已经被我拉黑了

HelloGakki 回复 @Sheetung

2024-09-24 09:05

我也拉黑了哈哈哈

eciwhknqfw我是广告

2024-09-22 18:35

博主真是太厉害了！！！

Sheetung 回复 @eciwhknqfw我是广告

2024-09-22 18:39

谢谢你的夸奖，那我就赠你广告拦截服务吧

十分钟助你搭建Github静态博客

ok首先使用docker容器拉取hexo博客容器

编辑hexo博客框架

附录

常用命令

有关lagom主题的bug

【转载】傅里叶分析之掐死教程（完整版）

git通关版使用教程

添加新评论

已有 8 条评论