Hexo+Github+Vscode搭建个人博客内含添加图片和更换主题

最新推荐文章于 2025-01-18 23:23:29 发布

原创最新推荐文章于 2025-01-18 23:23:29 发布 · 3.6k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#github #vscode #git

知识碎片专栏收录该内容

59 篇文章

订阅专栏

本文导航

0. 环境配置
1. 连接GitHub
2. 创建Github Pages仓库
3. 本地安装Hexo博客程序
4. Hexo初始化和本地预览
博客目录结构

5. 部署Hexo到GithubPages
6. 发布第一篇文章
生成页面
部署发布

其他
1) hexo更换主题
2) 插入图片
下载插件
修改插件
修改配置文件
插入图片命令

3) 使用vscode在markdown粘贴图片

参考资料：
_config.yml文件含义

Why I want to get a personal blog?
从2021年开始写博客以来，我发现了如下几个好处：

独立思考的能力。为了将知识解释清楚，我必须反复思考。
逻辑能力的提升。写博客的文字必须减少废话，这对之前的我来说是一件困难的事情，但是现在通过我写PPT和汇报的能力来看是有所提升的。
激励学习。发布博客的瞬间让我的学习变得有成就感，我能通过博客了解消失的时间花费在哪里。
交流。

那么为什么我选择搭建自己的博客呢？原因有三：其一是csdn博客网站打开缓慢；其二是想尝试搭建自己的博客网站；最后希望熟悉markdown语法。

此博客网站为主是我的学习笔记，有值得发布的内容会再继续同步到csdn博客。

本人现在已经不更新博客了，建议正在搭建的人也三思。hexo生成的博客是静态的，需要每次都手动生成页面，甚至因为浏览器缓存无法看见更新。因此我现在放弃了这个搭建方法，之后会另寻他法。总的来说搭建完还是挺有成就感的。

0. 环境配置

所需工具：Node.js、npm、git

安装Node.js和git：

Node.js: https://link.zhihu.com/?target=https%3A//nodejs.org/zh-cn
Git: https://link.zhihu.com/?target=https%3A//git-scm.com/downloads

安装完成后，在cmd下输入如下命令查看版本号：

node -v

npm -v

git --version

在这里插入图片描述

1. 连接GitHub

打开git bash，输入命令设置用户名和邮箱：

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

创建SSH密钥：

ssh-keygen -t rsa -C "GitHub 邮箱"

所生成文件在[C:\Users\用户名.ssh] 目录，查看id_rsa.pub公钥内容并复制。

添加公钥至github： Setting-> SSH and GPG keys-> New SSH key

在这里插入图片描述

验证连接：
打开GitBash，输入：

ssh -T git@github.com

显示 “Hi xxx! You’ve successfully……” 即连接成功。

2. 创建Github Pages仓库

GitHub 主页右上角加号 -> New repository：

Repository name 中输入用户名.github.io
勾选 “Initialize this repository with a README”
Description 选填
填好后点击 Create repository 创建。

在这里插入图片描述

3. 本地安装Hexo博客程序

tips:先添加代理，否则会非常缓慢

查看原来的代理

npm config get registry

修改代理

npm config set registry https://registry.npm.taobao.org

安装Hexo

npm install -g hexo-cli

如果界面没有反应，请耐心等待！

4. Hexo初始化和本地预览

初始化并安装所需组件：

hexo init      # 初始化

npm install    # 安装组件

完成后依次输入下面命令，启动本地服务器进行预览：

hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功！

博客目录结构

.
├── _config.landscape.yml
├── _config.yml   
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

_config.yml ：全局配置文件，比如网站名称，副标题，秒速，作者，语言等等。具体可以参考官方文档：https://hexo.io/zh-cn/docs/configuration.html。
scaffolds ：骨架文件，是生成新页面或者新博客的模版。可以根据需求编辑，当hexo生成新博客的时候，会用这里面的模版进行初始化。
source ：这个文件夹下面存放的是网站的markdown源文件，里面有一个_post文件夹，所有的.md博客文件都会存放在这个文件夹下。现在有一个hello-world.md文件。
themes ：网站主题目录，hexo有非常丰富的主题支持，主题目录会存放在这个目录下面。更多的主题参见：https://hexo.io/themes/

5. 部署Hexo到GithubPages

安装 hexo-deployer-git：

npm install hexo-deployer-git --save

修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

完成后运行 hexo d 将网站上传部署到 GitHub Pages。

完成！访问GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

6. 发布第一篇文章

hexo new "First post"

其中source 文件夹中会出现一个 First post.md 文件，就可以使用 Markdown 编辑器在该文件中撰写文章了。

写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布,以后每次发布文章都是这两条命令!

生成页面

hexo g

在这里插入图片描述

部署发布

hexo d

在这里插入图片描述

也可以不使用命令自己创建 .md 文件，只需在文件开头手动加入如下格式 Front-matter 即可，写完后运行 hexo g 和 hexo d 发布。

---
title: Tutorial:基于Hexo和Github搭建个人博客
date: 2022-08-25 14:07:06
tags:
- other
keywords:
- hexo
- github
- blog
---

摘要
<!--more-->
正文

至此，博客搭建成功 !!!

其他

1) hexo更换主题

下载主题
主题链接：https://github.com/jerryc127/hexo-theme-butterfly
Blog根目录下

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

更改配置文件

theme: butterfly

错误解决: https://blog.youkuaiyun.com/weixin_44318830/article/details/104884936

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

清除缓存

hexo clean

生成静态文件

hexo g

2) 插入图片

下载插件

进入根目录，右键打开git bash，输入如下命令：

npm install hexo-asset-image --save

修改插件

该插件在hexo3.1版本时发布，需要修改一处代码。
进入博客根目录找到node_modules-> hexo-asset-image-> index.js

在第58行

$(this).attr('src', config.root + link + src);

改成

$(this).attr('src', config.root + link + src);

保存文件

修改配置文件

在_config.yml配置文件将post_asset_folder:false改成true
hexo new "blog name"的时候会同时生成同名文件夹用来存放资源(将所有图片放在这个文件夹内)

在这里插入图片描述

插入图片命令

[ ](imgName.png)
[ ](./ImgFolder/imgName.png)

在vscode等markdown编辑器下也会正常显示图片

最后，hexo clean -> hexo g -> hexo s -> hexo d，查看博客。

3) 使用vscode在markdown粘贴图片

插件：Paste Image

在这里插入图片描述

快捷键如下：

ctrl + alt + v

参考资料：

_config.yml文件含义

# Site
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description: # 网站描述
author: John Doe  # 作者
language:    # 语言
timezone:    # 网站时区, Hexo默认使用您电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'
## and root as '/child/'
url: http://yoursite.com   # 你的站点Url
root: /                    # 站点的根目录
permalink: :year/:month/:day/:title/   # 文章的 永久链接 格式   
permalink_defaults:        # 永久链接中各部分的默认值

# Directory   
source_dir: source     # 资源文件夹，这个文件夹用来存放内容
public_dir: public     # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags          # 标签文件夹     
archive_dir: archives  # 归档文件夹
category_dir: categories     # 分类文件夹
code_dir: downloads/code     # Include code 文件夹
i18n_dir: :lang              # 国际化（i18n）文件夹
skip_render:                 # 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。    

# Writing
new_post_name: :title.md  # 新文章的文件名称
default_layout: post      # 预设布局
titlecase: false          # 把标题转换为 title case
external_link: true       # 在新标签中打开链接
filename_case: 0          # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false      # 是否显示草稿
post_asset_folder: false  # 是否启动 Asset 文件夹
relative_link: false      # 把链接改为与根目录的相对位址    
future: true              # 显示未来的文章
highlight:                # 内容中代码块的设置    
  enable: true            # 开启代码块高亮
  line_number: true       # 显示行数
  auto_detect: false      # 如果未指定语言，则启用自动检测
  tab_replace:            # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

# Category & Tag
default_category: uncategorized
category_map:       # 分类别名
tag_map:            # 标签别名

# 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       # 时间格式    

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10           # 分页数量
pagination_dir: page   # 分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape   # 主题名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的设置
deploy:     
  type: '' # 类型，常用的git