使用Hexo搭建自己的博客
本文转载自Gighub@jackfruedPython-100-Days, 看到此时还在零基础学python，其中学了django架构的一点皮毛，觉得很难学下去，但是看到这篇文章后发觉静态博客对小白还挺友好的，就抱着试一试的心态建了自己第一个博客，没想到就跟着大佬们魔改教程入坑了。
使用Hexo搭建自己的博客 对于一个程序员来说，搭建一个属于自己的博客平台是非常有意义的事情。首先，博客可以记录自己的成长历程，也是对自己一段时间学习和工作的总结和沉淀；其他，通过博客可以营销自己，增强自己在互联网或行业内的影响力，为将来更好的职业生涯打一个坚实的基础。前几年有一本名为《软技能 - 代码之外的生存指南》的畅销书，我记得书中有这么一段话：“流行乐队的音乐才华可能并不比夜店驻场乐队高多少，他们为什么就可以在全世界巡回演出，创造一个又一个白金记录？……你的营销做得越好，你的才华才能表现得淋漓尽致。”
这里顺便啰嗦两句，在互联网如此发达的今天，我们应该如何营销自己呢？自我营销首先要从打造个人品牌做起，对于程序员来说，最容易去做好的一件事情还是搭建 ...
Hello World
Hexo新手村 常回来看看Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
Hexo的webstack主题分站建立及修改
开始时使用博客源文件存放webstack静态文件，但是文件有7.4MB，也挺大的。为了缓解主站的加载压力，就把webstack导航站迁出去另外部署到服务器上，避免每次进入主站都要加载。
参考教程HCLonely的hexo-theme-webstack花猪的Hexo建立分站Harris’s Blog的搭建Hexo-WebStack网址导航
webstack静态文件存放主站示例下图是webstack的demo：！下图是我的webstack静态文件：！
安装webstack按照hexo-theme-webstack中文文档安装即可
备忘录
web缓存网 https://www.webcache.cn/拨测网 https://www.boce.com/渺软公益CDN https://cdn.onmicrosoft.cn/去不图床托管图片 https://7bu.top 多吉云大字体文件 Google Fonts 以及对应的国内镜像 https://cdn.baomitu.com/index/fonts
CDN 镜像节点
由于自己的图床放在npm,很多国内节点都用不了了,自己用的cdn加速unpkg.com有点慢,在网上找找能够的节点,转载文章同时作为记录。
教程地址CDN 镜像节点整理Butterfly CDN链接更改指南，替换jsdelivr提升访问速度
偶然看到的文章，发现这些节点蛮有用的，我虽然加入了浏览器书签，但是没有备忘录记录，就在这里记录下好了。
名称
地址
说明
阿里云 NPM 镜像 npmmirror
https://npmmirror.com/
国内的 NPM 淘宝镜像，用来下载 NPM 包的
npm ElementCDN
http://npm.elemecdn.com/
饿了么 CDN 镜像，目前不稳定，回源较长
npm ElementCDN
http://npm.elemecdn.com/
饿了么 CDN 镜像，目前不稳定，回源较长
jsDelivr
https://jsdelivr.com/
国外免费 CDN，之前挂过一次，现在国内需要魔法才能访问
jQuery CDN
https://releases.jquery.com/
jQuery 的 ...
友链样式魔改
由于volantis样式的友链卡片很窄，好像和博客宽屏适配有关，参照了@LiuShen’s Blog的魔改笔记四：友链页重构及友链朋友圈适配重新修改，使用flexcard样式，同时取消鼠标悬停显示博主描述信息框。
参考教程Friend Link Card Beautify
魔改步骤在Hexo博客根目录[Blogroot]下打开终端，输入hexo new page link。
1hexo new page link
打开[Blogroot]\source\link\index.md,添加一行type: ‘link’:
12345---title: 友情链接date: 2024-06-06 13:23:02type: 'link'---
新建文件[Blogroot]\source_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例。打开[Blogroot]\source_data\link.yml，输入：
1234567- class_name: 糖果屋のVIP class_desc: 售后服务享五折优惠2333 lin ...
博客宽屏适配
参考教程使用样式：博客宽屏适配修改原理：Hexo Butterfly宽屏适配指北
添加css样式在[BlogRoot]\source\css\custom.css中添加以下样式：
123456789101112131415161718/* 全局宽度 */.layout { max-width: 1400px;}/* 侧边卡片栏宽度 */.aside-content { max-width: 335px; min-width: 300px;}/* 平板尺寸自适应(不启用侧边栏宽度限制) */@media screen and (max-width: 900px) { .aside-content { max-width: none !important; padding: 0 5px 0 5px; }}
区分首页/分页适配不想再非首页的地方显示侧边栏，那就需要给非首页的页面加上标记，修改[BlogRoot]\themes\butterfly ...
引入iconfont自定义图标
参考教程buttery主题配置-Icon
新建图标项目访问阿里巴巴矢量图标库,注册登录。搜索自己心仪的图标，然后选择添加入库，加到购物车。选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。可以通过上方顶栏菜单->资源管理->我的项目，找到之前添加的图标项目。(现在的iconfont可以在图标库的项目设置里直接打开彩色设置，然后采用fontclass的引用方式即可使用多彩图标。但是单一项目彩色图标上限是40个图标，酌情采用。)
生成CSS链接在添加到项目之后，会跳到项目的详情界面。点击Font class，然后再点击暂无代码，点击生成文字。网站会自动生成CSS链接，我们只需要复制链接就行。
添加链接进主题配置文件打开主题配置文件，找到inject配置，按要求把链接填入在我们需要使用的地方填入icon，例如Menu，图片使用格式为iconfont icon名字
示例