我的小站

  • 首页

  • 标签

  • 分类

  • 归档

  • 搜索

Hexo博客搭建过程

发表于 2022-04-17 | 分类于 技术分享

环境准备

  1. 安装git 下载地址
  2. 安装Nodejs 下载地址
  3. 添加SSH Key到GitHub

安装cnpm

npm太慢,而且经常失败,使用淘宝镜像:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo

  1. git bash下执行以下命令安装:

    1
    cnpm i -g hexo
  2. 新建目录博客目录:C:/ADEV/myblog

    cd 到myblog并执行以下命令初始化hexo:

    1
    hexo init

    接下来的命令如果不是特意说明,都是在站点目录下执行。

  3. 查看博客雏形:
    1
    2
    3
    hexo clean #清理
    hexo g #生成网页
    hexo s #启动本地服务器

在浏览器中打开http://localhost:4000 ,就可以看到本地博客主页了。

创建文章

Ctrl+C退出hexo服务,执行以下命令创建新的文章:

1
hexo new test

终端会有以下输出:

1
INFO  Created: C:\ADEV\myblog\source\_posts\test.md

Hexo所有的文章都是Markdown文件,以后也可不通过命令,直接在_posts目录下创建新的文章。

美化博客 - 使用Next主题

Hexo有很多第三方主题,研究了一圈,最终决定使用Next。
Next很美观,很成熟,集成了你能想到的所有功能,大部分情况下只需要修改主题配置文件就行了,强烈推荐。

  1. 下载地址: https://github.com/theme-next/hexo-theme-next
  2. 解压到C:/ADEV/myblog/themes目录下,并重命名为next6
  3. 打开站点配置文件C:/ADEV/myblog/_config.yml, 找到theme字段,并将其值更改为next6
    1
    theme: next6

两个重要的配置文件

构建博客的过程中会经常修改一下两个配置文件:

  1. 站点配置文件:C:/ADEV/myblog/_config.yml
  2. 主题配置文件: C:/ADEV/myblog/themes/next6/_config.yml

发布到GitHub

  1. 创建一个GitHub repository,名称为yourgithubname.github.io(yourgithubname替换为你的GitHub账户名)
  2. 修改站点配置文件:

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/yourgithubName/yourgithubName.github.io.git
    branch: master

    注意格式,子项前面有两个空格,冒号后面有一个空格。
    如果接下来发布出错,请尝试将repo修改成以下形式:

    1
    repo: git@github.com:yourgithubName/yourgithubName.github.io.git
  3. 安装发布模块:

    1
    npm install hexo-deployer-git --save
  4. 执行以下命令发布:

    1
    2
    3
    hexo clean
    hexo g
    hexo d #发布

    在浏览器访问https://yourgithubname.github.io ,就可以看到你的博客了。

站点配置:

以下配置请查找关键字修改。

  1. 语言改为中文:

    1
    language: zh-CN

    注意在你的主题language目录下应该包含你所配置的语言配置文件,本例为:C:/ADEV/myblog/themes/next6/languages/zh-CN.yml。
    Next不同版本中文配置名字可能不一样,有的版本是zh-Hans,请根据具体情况配置。

  2. 标题&作者:

    1
    2
    title: 善生的个人博客
    author: 善生
  3. URL唯一化:

    1. 安装模块:

      1
      cnpm install hexo-abbrlink --save
    2. 修改配置:

      1
      2
      3
      4
      5
      6
      7
      # URL
      permalink: post/:abbrlink.html
      permalink_defaults:

      abbrlink:
      alg: crc32 # 算法:crc16(default) and crc32
      rep: hex # 进制:dec(default) and hex
  4. 自定义博文文件名格式(添加日期前缀,方便管理):

    1
    2
    # Writing
    new_post_name: :year:month:day-:title.md # File name of new posts
  5. 图片文件夹:

    1
    2
    # Writing
    post_asset_folder: true

    使用命令创建新的博文之后,会在博文同一目录下生成和博文同名的文件夹,把图片放入此文件夹下,图片有两种使用方法:

    1
    2
    3
    ![说明](图片.jpg)

    {% asset_img 图片.jpg 说明 %}

主题配置:

  1. 站点日期:

    1
    2
    footer:
    since: 2018
  2. 去掉底部一些链接:

    1
    2
    3
    4
    5
    6
    powered:
    enable: false
    version: false
    theme:
    enable: false
    version: false
  3. 博客标签页面,分类页面:

    1. 执行以下命令:

      1
      2
      hexo new page tags
      hexo new page categories
    2. 修改标签页C:/ADEV/myblog/source/tags/index.md:

      1
      2
      3
      4
      5
      6
      ---
      title: 所有标签
      date: 2018-08-15 22:56:08
      type: "tags"
      comments: false
      ---
    3. 修改分类页C:/ADEV/myblog/source/categories/index.md:

      1
      2
      3
      4
      5
      6
      ---
      title: 所有分类
      date: 2018-08-15 23:04:31
      type: "categories"
      comments: false
      ---
    4. 修改主题配置文件:

      1
      2
      3
      menu:
      tags: /tags/
      categories: /categories/
  4. Next样式:

    Next有四种样式,我使用的是Pisces:

    1
    2
    # Schemes
    scheme: Pisces
  5. 个人GitHub和Email:

    1
    2
    3
    social:
    GitHub: https://github.com/lano2088
    E-Mail: mailto:warrenvip@163.com
  6. 头像:

    将头像图片放到此位置:C:\ADEV\myblog\themes\next6\source\images\main.png,也可以是gif文件。修改主题配置:

    1
    2
    avatar:
    url: /images/main.png
  7. 更改头像最大宽度:

    根据你的头像宽度,修改样式文件:C:/ADEV/myblog/themes/next6/source/css/_variables/Pisces.styl:

    1
    $site-author-image-width          = 220px

    如果你用的是其它样式,请修改对应的文件。

  8. 开启打赏功能:

    将你的微信和支付宝二维码放到主题的images目录下:

    1
    2
    3
    4
    # Rewards
    reward_comment: 欢迎打赏
    wechatpay: /images/wechatpay.png
    alipay: /images/alipay.png
  9. 百度分享:

    1
    2
    baidushare:
    type: button

文章阅读量,访客统计:

编辑主题配置文件:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

集成第三方评论功能

第三方评论插件有很多,但是好用的不多。尝试过用来必力,但是注册失败了。看了下畅言,需要绑定备案的域名,不支持GitHub,好像免费版还有广告。最后决定使用gitment,他是借助了GitHub的issues功能实现的。好像可以实现有评论发送邮件,如果有自己的域名,再绑定腾讯企业邮箱,可以实现微信推送,具体还没研究。

gitment示例页面: https://imsun.github.io/gitment/

  1. 注册 GitHub OAuth Application

    点击此处 来注册一个新的 OAuth Application。其他内容可以随意填写,但要确保填入正确的 Authorization callback URL(一般是评论页面对应的域名,如 https://lano2088.github.io 或者个人域名:http://lanovip.xyz ,多个站点不能共用)。

    你会得到一个 client ID 和一个 client secret,这个将被用于之后的用户登录。

  2. 编辑主题配置文件:
    1
    2
    3
    4
    5
    6
    gitment:
    enable: true
    github_user: your_github_name # MUST HAVE, Your Github Username
    github_repo: your_comment_repo # MUST HAVE, The name of the repo you use to store Gitment comments
    client_id: your_client_id # MUST HAVE, Github client id for the Gitment
    client_secret: your_client_secret # EITHER this or proxy_gateway, Github access secret token for the Gitment

每篇文章发布之后需要到文章页面底部用你的GitHub账户登录,初始化评论。虽然有点麻烦,个人觉得还好。毕竟个人博客文章量有限。网上有批量初始化方法,请自行百度。

博客搜索功能

  1. 安装模块:

    1
    cnpm install hexo-generator-searchdb --save
  2. 修改站点配置:

    1
    2
    3
    4
    5
    6
    # 搜索
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  3. 修改主题配置:

    1
    2
    local_search:
    enable: true

修改文章内链接文本样式

修改文件 themes\next6\source\css_common\components\post\post.styl,在末尾添加如下css样式:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

其中选择.post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

压缩发布 - 优化博客加载速度

在站点的根目录下执行以下命令:

1
2
cnpm install gulp -g
cnpm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

新建 gulpfile.js ,并填入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

生成博文时执行hexo g && gulp就会根据gulpfile.js中的配置,对public目录中的静态资源文件进行压缩。

七牛云CDN加速

把图片放到七牛云上面,生成外链,可以优化博客访问速度。七牛云的免费流量完全可以满足个人博客的需求。

参考链接:

  1. Next官网
  2. Next酷炫效果
  3. Markdown语法
  4. 如何优雅的发布hexo博客
  5. Gitment:使用 GitHub Issues 搭建评论系统

树莓派使用nginx搭建静态网页

发表于 2018-09-09 | 更新于 2022-04-17

安装nginx:

sudo apt-get install nginx

启动nginx服务:

1
sudo service nginx start

在浏览器上输入网址:http://127.0.0.1,就可以看到nginx默认主页了。

nginx配置:

查看主配置文件:/etc/nginx/nginx.conf:

1
2
3
4
5
http {
...省略
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}

可以看到http服务包含以上两个目录下的配置文件。
我目前只需要起一个服务端口,所以直接修改默认80配置文件里面的静态网页路径:/etc/nginx/sites-enabled/default:

1
root ~/dev/myblog/public;

重启nginx服务:

1
sudo service nginx restart

完成。

nginx常用命令:

1
sudo service nginx {start|stop|restart|reload|force-reload|status|configtest|rotate|upgrade}

git命令记录

发表于 2018-09-08 | 更新于 2022-04-17

git本地忽略文件

使用.gitignore忽略文件,会从远程仓库中将文件直接删除。如果想保留远程仓库的文件,仅仅在本地忽略一些文件,例如一些配置文件,则可以使用以下命令:
git update-index --assume-unchanged filename

树莓派3B+ apt-get update 出错记录

发表于 2018-09-08 | 更新于 2022-04-17

树莓派3B+ apt-get update 出错记录

sudo apt-get update 出错:

1
2
3
4
5
6
7
8
E: 无法下载 http://101.44.1.125/files/B11600000762A811/mirrors.zju.edu.cn/debian/dists/stretch/main/binary-armhf/Packages.gz  Writing more data than expected (184092 > 174269)
Hashes of expected file:
- Filesize:174269 [weak]
- SHA256:949a940146e8a41829afee9a301507d59389c27c82d7a42eba4523b121648980
- SHA1:1b4f8b91ab3041de7eba7c4b5c1c9d3e20000967 [weak]
- MD5Sum:2e03359b53821e9e71414a2c1f579c75 [weak]
Release file created at: Wed, 05 Sep 2018 15:09:54 +0000
E: 部分索引文件下载失败。如果忽略它们,那将转而使用旧的索引文件。

更镜像源地址为中国科技大学:

  1. sudo nano /etc/apt/sources.list

    原文件:

    1
    2
    3
    deb http://raspbian.raspberrypi.org/raspbian/ stretch main contrib non-free rpi
    # Uncomment line below then 'apt-get update' to enable 'apt-get source'
    # deb-src http://raspbian.raspberrypi.org/raspbian/ stretch main contrib non-free rpi

    修改为:

    1
    2
    3
    4
    5
    deb http://mirrors.ustc.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
    deb-src http://mirrors.ustc.edu.cn/raspbian/raspbian/ stretch main contrib non-free rpi
    # deb http://raspbian.raspberrypi.org/raspbian/ stretch main contrib non-free rpi
    # Uncomment line below then 'apt-get update' to enable 'apt-get source'
    # deb-src http://raspbian.raspberrypi.org/raspbian/ stretch main contrib non-free rpi

    注意实际上只是把网址变了,后面部分不变,因为我看到以前的系统后面部分是不一样的。

  2. sudo nano /etc/apt/sources.list.d/raspi.list
    原文件:

    1
    2
    3
    deb http://archive.raspberrypi.org/debian/ stretch main ui
    # Uncomment line below then 'apt-get update' to enable 'apt-get source'
    #deb-src http://archive.raspberrypi.org/debian/ stretch main ui

    修改为:

    1
    2
    3
    4
    5
    deb http://mirrors.ustc.edu.cn/archive.raspberrypi.org/debian/ stretch main ui
    deb-src http://mirrors.ustc.edu.cn/archive.raspberrypi.org/debian/ stretch main ui
    # deb http://archive.raspberrypi.org/debian/ stretch main ui
    # Uncomment line below then 'apt-get update' to enable 'apt-get source'
    #deb-src http://archive.raspberrypi.org/debian/ stretch main ui

再次尝试更新:

sudo apt-get update 没问题。
sudo apt-get upgrade出错:

1
2
3
4
5
6
7
8
9
10
11
12
E: 无法下载 http://mirrors.ustc.edu.cn/archive.raspberrypi.org/debian/pool/main/f/ffmpeg/libavutil55_3.2.10-1~deb9u1+rpt2_armhf.deb  Hash 校验和不符
Hashes of expected file:
- SHA256:7461952290100c547db476ac7e2b3b727808a12060b0811490b42f2ad5f014d0
- SHA1:f79cb9b0ccf2375268fa9f27d60e8b1032a2ad77 [weak]
- MD5Sum:97cebd03678913ec7777cdc09602460b [weak]
- Filesize:234328 [weak]
Hashes of received file:
- SHA256:39043f5c516b326e2ced462aa3429c117c29831773e77440888c033c611ee3d0
- SHA1:bf444ace211d2f455b9cee540055786e6fd6bb6b [weak]
- MD5Sum:e6b2bd3e40e2c90651562ff882aa7d3f [weak]
- Filesize:234328 [weak]
Last modification reported: Wed, 01 Aug 2018 11:56:50 +0000
1
E: 无法下载 http://mirrors.ustc.edu.cn/archive.raspberrypi.org/debian/pool/main/f/ffmpeg/libavcodec57_3.2.10-1~deb9u1+rpt2_armhf.deb  无法发起与 mirrors.ustc.edu.cn:80 (2001:da8:d800:95::110) 的连接 - connect (101: 网络不可达) [IP: 2001:da8:d800:95::110 80]

再次修改配置

怀疑是/etc/apt/sources.list和/etc/apt/sources.list.d/raspi.list里面配置的源不一致,网上查了下sources.list.d目录下是配置第三方软件源。部里面内容全部注释掉,再次更新:
sudo apt-get update 有很多更新
sudo apt-get upgrade 没有任何软件升级,不知道对不对,但是至少没有错误了:

1
2
3
4
5
正在读取软件包列表... 完成
正在分析软件包的依赖关系树
正在读取状态信息... 完成
正在计算更新... 完成
升级了 0 个软件包,新安装了 0 个软件包,要卸载 0 个软件包,有 0 个软件包未被升级。

网站备案注意事项

发表于 2018-08-29 | 更新于 2022-04-17 | 分类于 其它

网站备案注意事项

网站备案需要进行两次:

  1. 管局审核
  2. 公安备案

管局备案注意事项:

  1. 需要申请幕布拍照,或者去指定地点拍照,上海地区有专门的APP认证可替代幕布。

公安备案注意事项:

  1. 提交身份证照片不能大于400k,正常照片用美图秀秀转换一下能变得很小。
  2. 上海地区需要将身份证和居住证一起拍照上传。
  3. 网站底部需要有ICP主体备案号,就是管局备案完成给的。
  4. 网站不能是交互式网站,否则很难审核通过。例如有评论功能。
  5. 如果申请都不通过请果断电话联系网警,省的浪费时间,因为审核不通过的短信没有太多信息。
糖豆豆

糖豆豆

5 日志
2 分类
5 标签
GitHub E-Mail
© 2018 – 2022 糖豆豆
沪ICP备18031962号