文章目录
起因
首先扔出自己的自建博客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: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
# 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图标显示