hexo+gitee免费搭建个人博客

hexo+gitee免费搭建个人博客

一、前期准备

node.js下载,官网: https://nodejs.org/zh-cn/
Git下载,官网:https://git-scm.com/根据提示安装即可。

二、hexo的安装和博客模板下载

1.新建一个MyWeb文件夹(名字不重要,要方便找到。),这个文件夹很重要,来会存储你所有博客的markdown文件以及生成的html文件,慎重选择。

2.进入MyWeb文件夹,右键点击Git Bsah Here

此时出现类似于windows命令窗口的窗口。

3.在窗口中输入以下代码npm install hexo-cli -g,静待运行结束。

4.在命令窗口输入hexo init初始化hexo模板,目录分析对比下面的图片。

5.运行hexo,注意是在MyWeb文件夹下运行。按如下顺序依次输入:
hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器,可以在localhost:4000查看网站修改效果
注意:"#"及以后文字仅为注释功能。 该窗口不支持快捷键复制粘贴。
在浏览器上输入 http://localhost:4000 就能查看演示样式helloworld页面:

一般默认的是一个landscape主题,后期当提交新文章或者新的样式修改时,往往都是先从本地查看结果无误后再部署到Gitee Page。
6.主题下载
官网主题:https://hexo.io/themes/
推荐两款:
1.Sakura 非常炫,缺点加载慢 https://github.com/honjun/hexo-theme-sakura

2.Next 功能集成多,简洁 https://github.com/theme-next/hexo-theme-next

进入github点击下载zip:https://github.com/honjun/hexo-theme-sakura
解压文件夹,将hexo-theme-sakura-master\themes中的主题样式复制MyWeb\themes目录下:
7.主题配置在MyWeb主目录找到:_config.yml,记事本打开并修改默认theme: landscape为
theme: sakura # 这里需要注意:后面要有一个空格,名称要和theme下的主题目录名称相同。
8.重新测试运行
hexo clean
hexo g
hexo s

Sakura主题的细节修改: https://cungudafa.blog.csdn.net/article/details/104295156

三、码云配置

1.申请码云账户,新建仓库
注意:仓库名,公开访问权限,语言为JavaScript,这里仓库名cungudafa必须与你注册github或gitee的注册名cungudafa相同,不然css路径会读错

2.获得仓库地址:

3.修改配置在MyWeb主目录找到:_config.yml,记事本打开并修改默认

其中repo后面为你的仓库地址,每个:后都有一个空格。
deploy:
type: git
repo: 你的项目地址
branch: master
4.部署博客
npm install hexo-deployer-git --save
hexo g --d #一键部署
此时会弹出一个对话框,提示输入码云的账号密码。部署成功后,登陆码云。此时本地文件夹中出现有一个public文件夹,代表部署成功。

目前,查看码云中文件为:

本地多个public文件夹:

5.开启Page功能

之前我的配置已为https,已勾选。修改位置如下图:

部署成功后如图:网址为登录网址:

6.访问博客 https://cungudafa.gitee.io

四、博客使用

1.在博客目录的source文件中的_post文件夹中添加你要写的博客文件,文件命名为file_name.md
file_name.md的文件开头如下:
---
title: file_name
tag: 标签名
categories: 分类
comment: 是否允许评论(true or false)
description: 描述
---
文档正文编写,请参照markdown语法。
示例:

2.发布文章并推送到gitee上

推送成功:

目前的内容是将md格式文件自动生成对应目录,转换成html格式显示。

再点击技术文档时,没有加载index.html


3.手动更新Gitee端
其实运行了hexo deploy(or d)应该就已经将新的网站文件(主要是网站目录下的public目录)上传到了Gitee,然而事实上上步之后直接访问网站URL会发现页面没有改变,原因在于:你、没有、更新!
https://gitee.com/cungudafa/cungudafa/pages 服务中选择更新:

是的,对于免费Gitee用户而言,你会需要手动更新一下Gitee Page,然后才可以将修改真的“部署”到可访问的网站上。

再访问:

五、总结

1.个人博客修改
博客目录在source文件中的_post下,文件命名为file_name.md
file_name.md的文件开头如下:
---
title: file_name
tag: 标签名
categories: 分类 #分类在sakura显示才能查看
comment: 是否允许评论(true or false)
description: 描述
---
文档正文编写,请参照markdown语法。
2.发布:
hexo clean # 清空已有hexo网站文件
hexo g --d# 依据网页文本与新的CSS样式生成新网站文件,并一键发布
hexo s # 启动本地服务器,可以在localhost:4000查看网站修改效果
免费使用gitee还需手动更新page。
3.hexo博客模板样式很多,需要一次详细的修改,能为博文锦上添花!

本文章转载于:https://cungudafa.blog.csdn.net/article/details/104260494
未经本人同意不得转载!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值