李亚楠
9 months ago
parent
325a5aa7a8
commit
14ed1fb709
3 changed files with 338 additions and 0 deletions
@ -0,0 +1,122 @@ |
||||
--- |
||||
title: Hexo博客放到OSS并自动更新 |
||||
abbrlink: 1255780786 |
||||
date: 2024-02-29 17:25:47 |
||||
tags: |
||||
categories: |
||||
keywords: |
||||
description: |
||||
cover: |
||||
--- |
||||
> Github Pages服务国内访问巨慢，Gitee Pages服务使用自定义域名的话价格较贵，最终我采用了使用OSS来放置静态网页，配合阿里的CDN访问速度还算不错。 |
||||
|
||||
> 文章主要分两部分，分别介绍OSS放置静态网页的方法和博客更新后怎么自动推送到OSS |
||||
|
||||
# OSS放置静态网页 |
||||
|
||||
## 创建Bucket |
||||
如图创建Bucket |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/091512.webp"> |
||||
|
||||
``` |
||||
Bucket名称：没有要求，不重复就可以 |
||||
地域：阿里云的节点国内访问速度都可以，如果不打算使用CDN服务的话，可以选择华东节点。如果使用CDN服务的话，选哪都行。 |
||||
存储类型：一般选择标准存储就可以了。 |
||||
同城冗余存储：不需要 |
||||
版本控制：不需要 |
||||
读写权限：一定要选公共读 |
||||
服务端加密方式：无 |
||||
实时日志查询：看需求，有免费7天的实时日志查询，但有900GB/天的限制 |
||||
定时备份：不开通 |
||||
``` |
||||
## 开启静态页面功能 |
||||
|
||||
我们尽如bucket页面，找到数据管理->静态页面。 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/091741.webp"> |
||||
|
||||
随后如图所示进行配置： |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/091910.webp"> |
||||
|
||||
## 自定义域名 |
||||
|
||||
做完上面的步骤，我们其实已经可以在OSS里存放我们的静态网站了，但是所使用的域名非常冗长，在此我们使用自定义域名（前提是自己的域名已经备案） |
||||
|
||||
我们在Bucket配置中找到域名管理。 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/092246.webp"> |
||||
|
||||
点击绑定域名，并输入自己需要绑定的域名。 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/092438.webp"> |
||||
|
||||
下面需要验证域名所有权，我们点击域名所有权验证。 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/092835.webp"> |
||||
|
||||
随后根据提示添加TXT记录和CNAME记录即可 |
||||
|
||||
## 设置CDN |
||||
设置CDN分两步，第一是申请HTTPS证书并托管；第二是修改域名的CNAME并指向CDN，其实在OSS的文档里说的已经很清楚了，这里我给出一张图便于理解： |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/093837.webp"> |
||||
|
||||
免费申请HTTPS整数的网站我这里推荐一个： |
||||
https://freessl.cn/ |
||||
|
||||
# 文章自动推送到OSS |
||||
如果每次写完文章都需要`hexo g`生成，然后把生成的静态页面拷贝的OSS的bucket中，那将是一件非常痛苦的事儿。 |
||||
所有有大佬帮忙写了插件，只需要`hexo d`，就可以自动把静态页面推送到bucket |
||||
|
||||
## 申请阿里云AccessKey |
||||
|
||||
右上角点击个人头像，随后电AccessKey管理 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/104155.webp"> |
||||
|
||||
点击开始使用子用户AccessKey |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/104626.webp"> |
||||
|
||||
随后点创建用户 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/104718.webp"> |
||||
|
||||
填写相关信息 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/104811.webp"> |
||||
|
||||
其中登录名和显示名称按自己习惯写就行，OpenAPI调用访问必须勾选，随后点确定 |
||||
|
||||
之后点击添加权限 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/105000.webp"> |
||||
|
||||
搜索OSS，并选择AliyunOSSFullAccess |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/105134.webp"> |
||||
|
||||
点击确定并完成。 |
||||
|
||||
随后如图点击复制，获取AccessKey和AccessSecret |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/03/01/105311.webp"> |
||||
|
||||
## 安装一键部署脚本 |
||||
|
||||
首先安装插件 |
||||
``` |
||||
npm install hexo-deployer-ali-oss --save |
||||
``` |
||||
随后进入博客根目录，找到_config.yml配置文件添加如下配置。 |
||||
``` |
||||
deploy: |
||||
type: ali-oss |
||||
region: <oss 区域代码>(比如：oss-cn-beijing) |
||||
accessKeyId: <oss accessKeyId> |
||||
accessKeySecret: <oss accessKeySecret> |
||||
bucket: <您的bucket name>(例如：template-blog) |
||||
``` |
||||
随后，我们在使用`heox d`命令时，就可以自动将生成的静态网页推送到OSS了。 |
||||
@ -0,0 +1,10 @@ |
||||
--- |
||||
title: Hexo配合Jenkins自动部署博客 |
||||
abbrlink: 3652362386 |
||||
date: 2024-02-29 15:11:40 |
||||
tags: |
||||
categories: |
||||
keywords: |
||||
description: |
||||
cover: |
||||
--- |
||||
@ -0,0 +1,206 @@ |
||||
--- |
||||
title: 使用Hexo搭建个人博客 |
||||
abbrlink: 332630035 |
||||
date: 2024-02-29 15:10:58 |
||||
tags: |
||||
categories: |
||||
keywords: |
||||
description: |
||||
cover: |
||||
--- |
||||
> 我之前的博客网站都是在自己的NAS中放的，使用CND使得可以使用80和443端口访问家里NAS的博客，但是因为DDNS每天要断开一段时间，家里偶尔会停电，导致百度和Google的收录效果奇差。无奈值得放弃在NAS放置个人博客。 |
||||
|
||||
> 不在NAS中放置博客后，我最终采用了使用纯静态网页Hexo的方式，并且将静态网也放在了OSS中，本篇主要介绍Hexo个人博客的搭建，OSS的设置放在下一篇。 |
||||
|
||||
# 搭建Hexo |
||||
|
||||
需要安装nodejs，到nodejs[官方网站](https://nodejs.org/en/download/current)下载最新的node并安装。 |
||||
|
||||
随后打开命令提示符，找到合适的位置依次输入如下命令： |
||||
|
||||
``` |
||||
npm config set registry https://registry.npmmirror.com/ |
||||
cnpm install -g hexo |
||||
``` |
||||
随后创建`个人博客`文件夹并进入文件夹 |
||||
```bash |
||||
md 个人博客 |
||||
cd 个人博客 |
||||
hexo init |
||||
hexo server |
||||
``` |
||||
不出意外的话，此时我们就可以使用localhost:4000来访问博客了。 |
||||
|
||||
# 安装主题 |
||||
Hexo默认的主题并不一定符合我们的审美，在这里推荐下[butterfly](https://github.com/jerryc127/hexo-theme-butterfly)主题，也是我目前在用的 |
||||
如图，从butterfly[github地址](https://github.com/jerryc127/hexo-theme-butterfly/releases)下载主题后，解压并改名为butterfly后放在themes文件夹下。 |
||||
|
||||
<img src="https://img.dreamlyn.cn:8443/i/2024/02/29/180922.webp"> |
||||
|
||||
随后修改根目录的_config.yml文件，将theme改为butterfly： |
||||
```yaml |
||||
theme: butterfly |
||||
``` |
||||
然后使用命令安装插件 |
||||
``` |
||||
npm install hexo-renderer-pug hexo-renderer-stylus --save |
||||
``` |
||||
为了后续升级方便，我们在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把butterfly目录的 _config.yml 所有内容复制到 _config.butterfly.yml 去。 |
||||
|
||||
# 网站配置 |
||||
这里只给出一些基础的配置。 |
||||
|
||||
## 网站名称等配置 |
||||
根据博客信息自行修改，其中url必须为博客所对应域名。 |
||||
```yaml |
||||
# Site |
||||
title: 牧尘的NAS小站 |
||||
subtitle: '最好用的NAS使用技巧' |
||||
description: 'NAS折腾不完全指南，定期分享一些好玩的东西，不定期记录生活。' |
||||
keywords: |
||||
author: 牧尘 |
||||
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: https://www.dreamlyn.cn |
||||
``` |
||||
|
||||
## 配置文章链接 |
||||
不修此配置博客也能正常使用，但当文章名为中文时，链接中容易出现中文，不利于百度收录 |
||||
首先我们安装 hexo-abbrlink 插件 |
||||
``` |
||||
npm install hexo-abbrlink --save |
||||
``` |
||||
随后修改配置 |
||||
```yaml |
||||
permalink: :abbrlink.html |
||||
permalink_defaults: |
||||
abbrlink: |
||||
alg: crc32 #support crc16(default) and crc32 |
||||
rep: dec #support dec(default) and hex |
||||
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 |
||||
``` |
||||
|
||||
## 添加分类和标签中英文映射。 |
||||
如果我们的分类或者标签中使用了中文，那么在网页中可能会出现中文url，不利于seo，在此我们进行映射 |
||||
``` |
||||
# Category & Tag |
||||
default_category: uncategorized |
||||
category_map: |
||||
Linux基础: linux |
||||
网络基础: network |
||||
NAS基础: nasbase |
||||
NAS服务: nasservice |
||||
技术随笔: other |
||||
tag_map: |
||||
Linux基础: linux |
||||
网络: network |
||||
NAS技术: nas |
||||
反向代理: rproxy |
||||
影音系统: video |
||||
``` |
||||
|
||||
## 新建分类页 |
||||
|
||||
1. `前往 Hexo 博客的根目录` |
||||
2. 输入 hexo new page categories |
||||
3. 你会找到 source/categories/index.md 这个文件 |
||||
4. 修改这个文件，添加 type: "categories" |
||||
``` |
||||
--- |
||||
title: 分类 |
||||
date: 2018-01-05 00:00:00 |
||||
type: "categories" |
||||
--- |
||||
``` |
||||
|
||||
## 新建分类页 |
||||
1. 前往 Hexo 博客的根目录 |
||||
2. 输入 `hexo new page tags` |
||||
3. 你会找到 source/tags/index.md 这个文件 |
||||
4. 修改这个文件，添加 type: "tags" |
||||
``` |
||||
--- |
||||
title: 标签 |
||||
date: 2018-01-05 00:00:00 |
||||
type: "tags" |
||||
orderby: random |
||||
order: 1 |
||||
--- |
||||
``` |
||||
|
||||
## 新建友情链接页面 |
||||
1. 前往 Hexo 博客的根目录 |
||||
2. 输入 `hexo new page link` |
||||
3. 你会找到 source/link/index.md 这个文件 |
||||
4. 修改这个文件，添加 type: "link" |
||||
``` |
||||
--- |
||||
title: 友情链接 |
||||
date: 2022-02-22 10:34:50 |
||||
type: 'link' |
||||
random: true |
||||
--- |
||||
|
||||
# 申请格式 |
||||
>< 博客名称 + 博客地址 + 博客Logo + 博客简介 > |
||||
>博客名称： |
||||
>博客地址： |
||||
>博客Logo： |
||||
>博客简介： |
||||
>(在评论中留言即可) |
||||
|
||||
``` |
||||
|
||||
> 关于Hexo的配置还有很多，本文无法全部列出，其余配置请参照butterfy提供的中文文档，小伙伴们有哪些配置不清楚的可以在评论区留言。 |
||||
# 其他常用插件 |
||||
|
||||
## 添加sitemap |
||||
|
||||
安装依赖 |
||||
```bash |
||||
λ cnpm install hexo-generator-sitemap --save #sitemap.xml适合提交给谷歌搜素引擎 |
||||
λ cnpm install hexo-generator-baidu-sitemap --save #baidusitemap.xml适合提交百度搜索引擎 |
||||
``` |
||||
然后在Hexo配置文件_config.yml中添加以下代码 |
||||
```yaml |
||||
# google 百度收录 |
||||
sitemap: |
||||
path: sitemap.xml |
||||
baidusitemap: |
||||
path: baidusitemap.xml |
||||
``` |
||||
## 百度主动推送 |
||||
|
||||
安装依赖 |
||||
```bash |
||||
λ cnpm install hexo-baidu-url-submit --save |
||||
``` |
||||
然后在Hexo配置文件_config.yml中添加以下代码 |
||||
```yaml |
||||
baidu_url_submit: |
||||
count: 3 ## 比如3，代表提交最新的三个链接 |
||||
host: www.dreamlyn.cn ## 在百度站长平台中注册的域名 |
||||
token: your_token ## 请注意这是您的秘钥， 请不要发布在公众仓库里! |
||||
path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里 |
||||
``` |
||||
|
||||
### 生成订阅 |
||||
|
||||
安装依赖 |
||||
```bash |
||||
λ cnpm install hexo-generator-feed --save |
||||
``` |
||||
然后在Hexo配置文件_config.yml中添加以下代码 |
||||
```yaml |
||||
#RSS 订阅 |
||||
feed: |
||||
type: atom |
||||
path: atom.xml |
||||
limit: 20 |
||||
hub: |
||||
``` |
||||
Loading…
Reference in new issue