前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo快速搭建一个博客

Hexo快速搭建一个博客

作者头像
花猪
发布2022-02-16 15:27:12
2970
发布2022-02-16 15:27:12
举报

前言

  首先非常感谢羊哥的教程,跟着一步步操作,非常快速地搭建好了个人博客。这里抛出两个链接:

  b站教学视频:https://www.bilibili.com/video/BV1Yb411a7ty

  羊哥的个人博客:https://www.codesheep.cn/

  上个学期的Python课设就写了一个基于Flask框架的博客管理系统,虽然用起来很方便,但是写起来还是有点繁琐的。框架的学习还是有一些成本在内的,而且前端如果没两把刷子那真的是不能看😂。假期是有打算继续优化下那个项目,“稍微”改一下部署到服务器上去(前端的静态模板我都找好了,这里再安利一下杨青青的个人博客:https://www.yangqq.com/ 里面的模板还是非常好看的,静态和动态的模板都有~~)

  但是奈何自己太辣鸡,这玩意儿倒不是说不想碰了,就是感觉好麻烦,一个功能实现太耗时(这个项目大部分时间都花在了前端上,出bug最多的地方也在前端)。但是用起来确实方便,不像静态博客,目前更新一次的操作步骤比起项目来说还是繁琐了一些。综合考虑了一下还是选择了静态博客,用Hexo搭建,在前端框架基础之上DIY,还是蛮有趣的。

搭建博客

前期准备

  1. 安装Node.js 官网链接:https://nodejs.org/en/
  2. 为了解决速度慢的问题。建议给Node.js换一个镜像源,这里根据羊哥的教程更换了淘宝的镜像源,代码如下:
代码语言:javascript
复制
npm install -g npm --registry=https://registry.npm.taobao.org
  1. 安装Hexo 官网链接:https://hexo.io/ 直接在首页复制代码,粘贴运行就好:
代码语言:javascript
复制
cnpm install -g hexo-cli

快速搭建

  1. 初始化 在本地创建一个文件夹,作为博客部署的空间。(注:以后所有的操作都基于此文件夹,如果出现了什么问题无法解决,删掉重来就好)在此文件夹内初始化hexo:
代码语言:javascript
复制
hexo init

接下来就会在此目录下自动生成一些文件,初始化完成

  1. 启动本地服务
代码语言:javascript
复制
hexo s

通过本地默认的4000端口访问:http://localhost:4000

  1. 尝试写第一篇博文 语法:hexo n “文章名称”
代码语言:javascript
复制
hexo n "第一篇博客文章"

然后会发现在sourse/_posts目录下,生成一个.md文件,在此就可以编写文章了。

  1. 清理缓存
代码语言:javascript
复制
hexo clean
  1. 生成静态文件
代码语言:javascript
复制
hexo g

这就是最基本的操作流程啦~~~~

部署到github/gitee

部署到github

  1. 到github去新建仓库 注意命名格式:账号名.github.io(例:CNhuazhu.github.io
  2. 安装git部署的插件
代码语言:javascript
复制
cnpm install --save hexo-deployer-git
  1. 设置_config.yml文件 在博客目录下找到_config.yml文件,最底部有一个# Deployment模块,在此设置:
代码语言:javascript
复制
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/CNhuazhu/CNhuazhu.github.io.git
  branch: master
  1. 部署到远端
代码语言:javascript
复制
hexo d

注:访问可能要过一段时间才会生效;账户中含有大写字母也没有关系,地址栏输入的时候同一替换为小写就可以访问

部署到gitee

前四步和github的方法一样,点击此处跳转到第五步。

  1. 到gitee去新建仓库 注意:这里同github不同,仓库名可以随便,不必使用自己的账号名
  2. 安装git部署的插件
代码语言:javascript
复制
cnpm install --save hexo-deployer-git
  1. 设置_config.yml文件 在博客目录下找到_config.yml文件,最底部有一个# Deployment模块,在此设置:
代码语言:javascript
复制
   # Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/CNhuazhu/cnhuazhu.git
  branch: master
  1. 部署到远端
代码语言:javascript
复制
hexo d
  1. 开启 Gitee Pages 静态网页托管服务 进入到仓库中,选择服务下拉框中的Gitee Pages选项,进入后点击部署。使用提供的网址即可访问博客:http://cnhuazhu.gitee.io 注:每次重新部署代码到gitee时,都需要点击下方的更新按钮重启page服务

更换主题

hexo提供多种主题,直接抛链接:

hexo主题官网:https://hexo.io/themes/

  1. 下载主题 可以直接输入命令进行下载,格式:git clone 主题地址.git themes/目录,这里以下载yilia主题为例:
代码语言:javascript
复制
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

然后在themes目录下就会出现名为yilia的主题文件夹

  1. 修改_config.yml文件 找到# Extensions模块下的theme标签(默认为landscape),将其替换为下载好的主题名称yilia
代码语言:javascript
复制
theme: yilia

然后再重新清理缓存、部署、启动本地服务、推到远端,就可以啦~~~~

总结

按照教程来操作,没什么难度。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-01-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 搭建博客
    • 前期准备
      • 快速搭建
      • 部署到github/gitee
        • 部署到github
          • 部署到gitee
          • 更换主题
          • 总结
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档