从零开始搭建一个酷炫的个人博客

效果图

20240623194456_rec_

一、搭建网站

git和hexo准备

  1. 注册GitHub
  2. 本地安装Git
  3. 绑定GitHub并提交文件
  4. 安装npm和hexo,并绑定github上的仓库
  5. 注意:上述教程都是Windows系统,Mac系统会更简单!

域名准备

  1. 购买域名,买的是腾讯云域名,购买完成之后的域名管理
  2. 解析域名
  3. 域名备案

二、优化网站

  1. 使用的Fluid主题,Hexo Fluid 用户手册

  2. 增加图床,图片可以放在git中一起上传,但是图片多了会拖慢网站打开速度,推荐使用外链图床

    • 采用的是腾讯云的对象存储,直接购买资源包,然后上传图片即可,价格:10元/1年
    • 购买界面
    • 使用界面
  3. 增加评论

  4. 增加页面统计

  5. 变更图标和界面图片

    • 把想要显示的图片放到:themes/fluid/source/img文件夹下

    • themes/fluid/_config.yml配置文件中通过img/xx.png来定位图片

    • # 用于浏览器标签的图标
      # Icon for browser tab
      favicon: /img/icon
      
  6. GitHub的网站增加README.md

    • 在根目录 source 文件夹下新建README.md

    • 在根目录的 _config.yml 配置文件里,找到 skip_render 关键字,添加 README.md

    • # 解释器跳过md渲染为html的过程
      skip_render: README.md
      

三、发布第一篇文章

官方文档

新建一篇文章

  1. hexo new post "第一篇文章"
  2. 在博客目录下的/source/_posts/ 文件夹下,可以看到已经生成了标题为第一篇文章.md的博客文件,可以在_posts/文件夹下创建子目录,用以更好的管理文章
    目录结构
  3. Hexo 发布的文章是 Markdown 格式的文件

新建一篇草稿

  1. hexo new draft "第一篇草稿"
  2. 在博客目录下的/source/_drafts/ 文件夹下,可以看到已经生成了标题为第一篇文草稿.md的草稿文件,
  3. 草稿文章不会被其他人看到,直到通过hexo publish draft "第一篇草稿"才会把草稿推送为正式文章,从而被观测到

给文章添加分类和标签

---
title: 个人博客搭建完整攻略
date: 2022-12-27 14:47:08
tags:
- 博客
- hexo             // 多个标签
  categories:
- [其他技能, 博客搭建]   // 多层级分类,中间用英文逗号分隔
---

添加的分类结构

设置文章摘要

  1. 关闭自动摘要,在主题配置文件/themes/fluid/_config.yml中找到auto_excerpt,设置enable=false

    index:
      auto_excerpt:
        enable: true
    
  2. 在文章中指定摘要

    ---
    title: 这是标题
    excerpt: 这是摘要
    ---
    

设置文章模板

  1. scaffolds/post.md 设置正式文章模板
  2. scaffolds/draft.md 设置草稿模板
---
title: {{ title }}
date: {{ date }}
tags:
-
categories:
- []
  excerpt: {{ title }}
---

启动博客服务器

  1. 启动并本地测试:hexo server
  2. 发布到Github上hexo clean && hexo g && hexo d

20240623194456_rec_


更多惊喜

我们的公众号还将定期分享:

  • 最新互联网资讯:让你时刻掌握行业动态。

  • AI前沿新闻:紧跟技术潮流,不断提升自我。

  • 技术分享与职业发展:助你在职业生涯中走得更远、更稳。

  • 程序员生活趣事:让你在忙碌的工作之余找到共鸣与乐趣。

关注回复【1024】惊喜等你来拿!

敬请关注【程序员世杰】

coder_world_618

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员世杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值