github + hexo 小白超快搭建功能强大的个人博客网站(2)

简介: github + hexo 小白超快搭建功能强大的个人博客网站(2)

1. 更换主题


去官网下载自己喜欢的主题,官网地址:https://hexo.io/themes/


太多了,不知道怎么选?可以去百度一下或者去知乎上捞一捞


小牛选用了next这个主题,感觉简洁,用的人也多~~

hexo theme next:


Github地址,这个是社区维护至今的


原作者文档地址,但是原作者不维护了,感觉上面的东西可能过时了,还是以上面的文档为准


hexo官方文档地址,这个也很重要


小牛根据官方文档开始折腾了:


2.下载主题next


在GitBlog\themes目录下,执行:


git clone https://github.com/theme-next/hexo-theme-next themes/next


image.png


发现 自带themes父目录,我们只需要一个即可,不然会出现WARN No layout: index.html,会导致页面显示不出来

image.png


修改 站点配置文件config.yml,注意不是next主题里的config.yml,找到如下代码:


## Themes: https://hexo.io/themes/
##theme: landscape
theme: next


执行以下命令,使配置文件修改生效


hexo clean //清理缓存
hexo g    //生成
hexo s    //启动服务预览


image.png


3. 修改Next为中文


修改 站点配置文件_config.yml


#language: en
language: zh-CN


执行以下命令,使配置文件修改生效:


hexo clean //清理缓存
hexo g    //生成
hexo s    //启动服务预览


效果:


image.png


4. 博客个性化


对博客进行简单地定制化,找到Site ,配置网站一些基本信息,下面贴一下官网的基本配置:


image.png


修改 站点配置文件_config.yml


image.png


执行以下命令,使配置文件修改生效:


hexo clean //清理缓存
hexo g    //生成
hexo s    //启动服务预览


效果如下:

image.png


5. 新建标签及分类标签


image.png


如果觉得文章对你有帮助,欢迎关注微信公众号:小牛呼噜噜


修改 主题配置文件_config.yml


image.png


把 tags 和 categories ,about前面的 # 删除


效果如下:


image.png


启用关于页,标签页和分类页,我们需要自己手动建页


首先打开source目录


image.png


执行:


hexo n page about
hexo n page tags
hexo n page categories


source目录下会多处3个文件夹:


image.png


分别编辑各文件夹的index.mdimage.png


image.png


image.png


6. 更换主题的样式


next 内置许多样式,可以自己选择


在主题配置文件/next/_config.yml中查找:scheme,找到如下代码:


# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini


个人比较喜欢 Gemini


选择你喜欢的一种样式,去掉前面的 #,其他主题前加上 # 即可。


7. 设置头像


在主题配置文件/next/_config.yml中查找:avatar,找到如下代码:


image.png


小牛这里用的是 图片在自己github图床的地址,如果有小伙伴不了解,可以看我之前的一篇文章,关于github怎么搭建图床的,并通过cdn加速


效果如下:

image.png


8. 编辑侧边栏的社交链接


在主题配置文件/next/_config.yml中查找:social,找到如下代码:


根据自己的需求来改:


image.png


效果:


image.png


9. 编写博客


Hexo的博客都是用Markdown写的。


在D:\username.github.io\source_posts的空白处右键Git Bash Here


hexo new '第一篇文章'


image.png


执行以下命令:


hexo clean //清理缓存
hexo g    //生成
hexo s    //启动服务预览

image.png


文章还是空的,我们现在来编辑一下:分别依次编辑:标签,分类,正文


image.png


效果:


image.png




10. 上传至github中


hexo clean //清理缓存
hexo g    //生成
hexo d    //上传部署


效果如下:

image.png


本篇文章到这里就结束啦,如果喜欢的话,多多支持,欢迎关注!

相关文章
|
7月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
297 3
|
7月前
|
自然语言处理 搜索推荐 开发者
GitHub Copilot Enterprise三大创新功能
【2月更文挑战第9天】GitHub Copilot Enterprise三大创新功能
147 4
GitHub Copilot Enterprise三大创新功能
|
7月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
218 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
3月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
4月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
4月前
|
CDN
惊呆了、老铁。CSDN竟然有GitHub的加速功能????
这篇文章介绍了几种加速访问GitHub的方法,包括使用镜像网站、代理网站下载、利用CDN加速以及转入Gitee平台进行加速。作者建议,对于较大的项目推荐使用代理网站或Gitee下载,而对于较小的项目,使用CDN加速即可满足需求。
惊呆了、老铁。CSDN竟然有GitHub的加速功能????
|
3月前
|
消息中间件 Kafka Go
使用github.com/IBM/sarama 编写消费kafka的功能
使用github.com/IBM/sarama 编写消费kafka的功能
|
6月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
64 2
|
7月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
7月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
89 1