文章目录
起因
首先扔出自己的自建博客http://shiqi-lu.tech
很久之前就想搭建自己的博客了，只是嘛，一直都没有时间（划掉，就是懒）。这一次之所以突然下定决心要搞一波，完全是因为我的同桌真的是个超级大神，北大本科，杜克大学博士，也有一个自己的博客和介绍页，看着她的介绍页真的是超级牛，超级强，而且不仅是学习强，还在自己感兴趣的各个领域钻研的很深。让我不禁练练感叹，大牛的人生真的是超级强，真可谓最强鸡血，对比下来仿佛我白活了这么多年，没有留下任何值得留存的记录。
所以，受到这个启发（主要是刺激），我也要开始搭建自己的博客和个人主页，但同时我觉得我最好同时发布和维护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能访问即可做域名解析，具体参考知乎
挑选主题
原本我想直接在官方的主题链接里挑一个比较合适的，给自己定了几个标准：
- 整体必须是简洁的，那种大量有图片装饰的，背景花哨的不考虑（原因是，挑图片暴露自己的垃圾审美，还要给每个博客挑配图太费心力了）
- 必须能支持公式、代码块高亮等的解析
- 偏好整体布局要简洁，偏好侧边栏在右边，并且偏好文章要有侧边栏
- 主题必须有开发者长期维护和更新
- 能有评论系统
在上面看花了眼，都没有一个不合适的，看了大半天，猛然觉得自己挑选的思路不对，在最原始的未经过筛选的主题站里挑选，能不费劲吗？
转换思路，直接搜推荐的hexo主题，然后看到next主题是几乎完全符合我的要求的，然后发现next主题经历了好几个大版本的迭代，甚至github仓库都换了几次，直接上最新的8.0版本，拉下来
next主题各种调整优化
next主题中可以进行自主化调整的地方还挺多的，而且8.0版本中，很多地方和以往版本中有不一样的调整方式，我尽量把我用到的写一下。所做的所有操作基本是改一下themes/next下的_config.yml，很少一部分是更改hexo下的_config.yml，偶尔会使用npm装个包
设置首页信息
title: 每天净瞎搞
subtitle: '关注：AI/CS/数学/自我提升等'
description: '既然选择了远方，便只顾风雨兼程'
author: Shiqi Lu
language: zh-CN
timezone: 'Asia/Shanghai'
url: http://shiqi-lu.tech
风格选择
我把四个风格都试了一遍，最后比较喜欢Gemini
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini
支持暗黑模式
这可是个意外惊喜，还会根据系统的设置自动适配
# Dark Mode
darkmode: true
设置建站时间
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2020
设置网站脚注的信息（图标、备案等）
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
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文档
侧边栏
我喜欢放在右边，主要是因为视觉聚焦主要是在左边的
sidebar:
# Sidebar Position.
# position: left
position: right
打开文章标题下方更新时间、阅读时长等信息
# 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字段，或在文章中添加一行注释辅助，参考官方文档
# 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
头像设置
在url里放置本地图片或者图床链接
# 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的高亮样式
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: ''
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
社交账号设置
social:
GitHub: https://github.com/shiqi-lu || fab fa-github
E-Mail: mailto:[email protected] || 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
# Local Search
search:
path: search.xml
field: post
content: true
format: html
# 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，参考头像配置，这里的邮箱提醒好像有问题，官方说明的方法不能用了。这个以后再说吧，我也不想有个评论就给我发邮件，要真有比较紧急的事情，直接发我邮箱吧
尚未完成部分
这部分以后看时间和心情做吧，每做一部分记录一部分吧
- SEO
- 个人简介
- README
- 访问速度比较慢，考虑使用除github外的托管服务
- 考虑使用CI
- 考虑CDN加速
- 考虑把http转换成https
- 备案
- 图床替换成自己的域名
- 微信或支付宝的打赏
- 完善和链接一下领英
- ipad的chrome的小图标适配
已知问题
- 在ipad上的safari显示的时候没有font awesome图标显示