每天净瞎搞

关注:AI/CS/数学/自我提升等

0%

第一篇博客:为什么我要建博客和写博客

起因

很久之前就想搭建自己的博客了,只是嘛,一直都没有时间(划掉,就是懒)。这一次之所以突然下定决心要搞一波,完全是因为我的同桌真的是个超级大神,北大本科,杜克大学博士,也有一个自己的博客和介绍页,看着她的介绍页真的是超级牛,超级强,而且不仅是学习强,还在自己感兴趣的各个领域钻研的很深。让我不禁连连感叹,大牛的人生真的是超级强,真可谓最强鸡血,对比下来仿佛我白活了这么多年,没有留下任何值得留存的记录。

所以,受到这个启发(主要是刺激),我也要开始搭建自己的博客和个人主页,但同时我觉得我最好同时发布和维护3个平台,一个是CSDN,一个是公众号,一个是这个博客。毕竟文章写好之后,多发布一下几乎不费时间。

为什么要选择github和hexo

选择github主要是因为能借助git的版本管理,顺便可以在github的热力图刷的好看一点,还有托管在github免费哇,不需要再另外维护云主机,不想当运维。省一笔主机钱,我只需要出钱买个域名即可,万网这个.tech域名买了10年也才199块,就是整个博客搭建中的唯一花销了

选择hexo是因为,能支持markdown的书写,和我现有的工具套件能配套上,可以无缝迁移过来,hexo的生态和主题都相对完善。

过程和踩坑

申请域名

直接上万网购买自己的域名,做完实名认证之后即可先放着,详细步骤具体参考知乎

安装node和hexo,并部署到github

具体参考知乎,我是安装在macOS上,不需要搞这里面复杂的各种环境变量。

踩坑:我原本以为是建完git仓库后,把仓库pull下来,在里面初始化hexo,但后面看了一下,是要在空文件夹操作,并且后续发布到github的文件是hexo进行编译后的文件。

域名解析

能够部署之后保证通过github.io能访问即可做域名解析,具体参考知乎

挑选主题

原本我想直接在官方的主题链接里挑一个比较合适的,给自己定了几个标准:

  1. 整体必须是简洁的,那种大量有图片装饰的,背景花哨的不考虑(原因是,挑图片暴露自己的垃圾审美,还要给每个博客挑配图太费心力了)
  2. 必须能支持公式、代码块高亮等的解析
  3. 偏好整体布局要简洁,偏好侧边栏在右边,并且偏好文章要有侧边栏
  4. 主题必须有开发者长期维护和更新
  5. 能有评论系统

在上面看花了眼,都没有一个不合适的,看了大半天,猛然觉得自己挑选的思路不对,在最原始的未经过筛选的主题站里挑选,能不费劲吗?

转换思路,直接搜推荐的hexo主题,然后看到next主题是几乎完全符合我的要求的,然后发现next主题经历了好几个大版本的迭代,甚至github仓库都换了几次,直接上最新的8.0版本,拉下来

next主题各种调整优化

next主题中可以进行自主化调整的地方还挺多的,而且8.0版本中,很多地方和以往版本中有不一样的调整方式,我尽量把我用到的写一下。所做的所有操作基本是改一下themes/next下的_config.yml,很少一部分是更改hexo下的_config.yml,偶尔会使用npm装个包

设置首页信息

hexo/_config.yml
1
2
3
4
5
6
7
title: 每天净瞎搞
subtitle: '关注:AI/CS/数学/自我提升等'
description: '既然选择了远方,便只顾风雨兼程'
author: Shiqi Lu
language: zh-CN
timezone: 'Asia/Shanghai'
url: http://shiqi-lu.tech

风格选择

我把四个风格都试了一遍,最后比较喜欢Gemini

themes/next/_config.yml
1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

支持暗黑模式

这可是个意外惊喜,还会根据系统的设置自动适配

themes/next/_config.yml
1
2
# Dark Mode
darkmode: true

设置建站时间

themes/next/_config.yml
1
2
3
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2020

设置网站脚注的信息(图标、备案等)

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
footer:
# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#808080"

网站图标

先到网上找适合的图标,然后更新一下对应的文件,免费的图标素材网站:Easyicon

themes/next/_config.yml
1
2
3
4
5
favicon:
small: /images/7-16.png
medium: /images/7-32.png
apple_touch_icon: /images/7-128.png
safari_pinned_tab: /images/7-128.png

标签页和分类页

参考next文档

侧边栏

我喜欢放在右边,主要是因为视觉聚焦主要是在左边的

themes/next/_config.yml
1
2
3
4
sidebar:
# Sidebar Position.
# position: left
position: right

打开文章标题下方更新时间、阅读时长等信息

参考官方文档
先按照npm包:

1
2
$ npm install hexo-word-counter
$ hexo clean
hexo/_config.yml
1
2
3
4
symbols_count_time:
symbols: true
total_symbols: false
total_time: false
themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
separated_meta: true
item_text_total: true

博客首页的摘要设置

这个要配合文章中的description字段,或在文章中添加一行注释辅助,参考官方文档

themes/next/_config.yml
1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

置顶的百分比和顶部进度条

默认给的颜色有点花哨,我改成了灰色

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
# color: "#37c6c0"
color: "#808080"
height: 3px

头像设置

在url里放置本地图片或者图床链接

themes/next/_config.yml
1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/7-128.png
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: false

代码块高亮风格选择

使用了hightlight.js的高亮样式

hexo/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
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: ''
themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: tomorrow-night-bright
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: flat

社交账号设置

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/shiqi-lu || fab fa-github
E-Mail: mailto:traumlou@163.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook

social_icons:
enable: true
icons_only: false
transition: true

支持本地搜索

参考官方文档
先装包:$ npm install hexo-generator-searchdb

hexo/_config.yml
1
2
3
4
5
6
# Local Search
search:
path: search.xml
field: post
content: true
format: html
themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

评论系统

评论系统选择了valine,请参考next文档,其中头像需要注册一下Gravatar,参考头像配置,这里的邮箱提醒好像有问题,官方说明的方法不能用了。这个以后再说吧,我也不想有个评论就给我发邮件,要真有比较紧急的事情,直接发我邮箱吧

文章置顶

注意这里8.0更新之后,就不是通过安装插件改源码的方式实现,直接在文章的front-matter里面添加一个字段:sticky就可以实现了,值越高排的越前,默认为0是按照时间顺序,参考官方文档

文章赞赏

要先准备好微信,支付宝等的二维码,然后放在images下或放在图床中

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true
animation: false
comment: 觉得文章写得不错就请博主喝杯奶茶吧(* ̄∇ ̄*)

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

简单的使用指南

写新博文

在blog目录下输入命令hexo new post <title>,会自动在<blog-dir>/source/_posts目录下生成对应的title文件,这时候用md编辑器打开写博客即可

本地测试

博文写完之后,因为各种不同的解析器和浏览器对md的支持会不一样,先本地看看效果,运行命令:hexo clean && hexo s,然后根据提示在浏览器打开localhost:4000即可查看

推送到网站上

运行命令:hexo clean && hexo g -d即可

尚未完成部分

这部分以后看时间和心情做吧,每做一部分记录一部分吧

  • SEO
  • 个人简介
  • README
  • 访问速度比较慢,考虑使用除github外的托管服务
  • 考虑使用CI
  • 考虑CDN加速
  • 考虑把http转换成https
  • 备案
  • 图床替换成自己的域名
  • 完善和链接一下领英
  • 研究一下博客如何分享链接到微信

已知问题

  • 在ipad上的safari显示的时候没有font awesome图标显示,文章内容侧边栏等显示不出来,但ipad的chrome没问题,iphone的safari也没问题,真是奇怪

参考资料