Hexo+stun主题+Gitee5分钟快速搭建你的个人Blog

简介: Hexo+stun主题+Gitee5分钟快速搭建你的个人Blog

环境配置

首先要下载Node.js,然后安装Git,接着注册码云,最后安装Hexo,Hexo安装命令行(cmd 或 gitbash):

npm install hexo-cli -g

速度慢可以先改一下安装源:

npm config set registry https://registry.npm.taobao.org

Hexo搭建

目录说明和基础文件配置可以查看文档->https://hexo.io/zh-cn/

  • 在想要存放博客的目录里右键打开gitbash,然后输入:
hexo init
  • 接着生成静态页面:
hexo g
  • 然后启动本地服务,查看界面是否生成:
hexo s

http://localhost:4000复制到浏览器查看,默认主题为landscape。(在下面的每次配置中,对根目录的_config.yml修改后都要重新执行hexo g,同时可以不断刷新本地服务查看效果)

主题

其他具体相关配置和文件目录说明可参考文档->https://theme-stun.github.io/docs/zh-CN/guide/quick-start.html

博客系统至此基本搭建完,我们接下来更换主题stun。在themes文件夹下右键gitbash,输入下面的命令:

git clone https://github.com/liuyib/hexo-theme-stun.git

打开根目录下的_config.yml配置文件,在theme修改主题:

写文章

  • 新建文章方法:在项目根目录,打开gitbash:
hexo new page about

然后就可以在/source/_posts找到markdown文件。

我的目录如下:

  • 使用已有markdown文件:复制到上述目录即可,注意在文件头加上一些信息,基本结构:

具体配置可参考上面提供的文档链接

部署到码云

首先在码云上创建一个仓库,建议是仓库名用用户名,这样的话生成的gitee pages的域名很短。复制仓库连接。

在项目根目录下的_config.yml中,修改deploy的值,repo设置为仓库链接:

然后修改git用户名和邮箱为码云的用户名和邮箱:

git config --global user.name 码云的名字
git config --global user.email 码云的邮箱

接着安装hexo-deployer-git:

npm install hexo-deployer-git --save

然后部署到仓库:依次执行3个命令

hexo g
hexo d

接着配置gitee pages:

接着在项目根目录的_config.yml中修改url和root:

root设置为仓库名(我这里没有子目录,就设置为空就行)。

最后重新部署一遍博客即可:

hexo clean
hexo g
hexo d

通过gitee pages的域名访问自己的博客了

踩坑出现的问题(重点)

布局是乱的且没有样式

通过键盘SHIFT+F5刷新浏览器缓存即可出现

图片没有显示出来

如果图片显示有问题,可以使用下面这种方法:

先将根目录的_config.yml中的post_asset_folder设置为true:

这样的话,新建文章时还会建立一个同名的文件夹,我们可以图片放在这个文件夹下。

然后下载一个插件,根目录下:

npm install https://github.com/CodeFalling/hexo-asset-image --save

图片还是没有出来且点击头部导航跳转404

看你自己创建的仓库图中指示的箭头是否都跟你自己的个人用户名称一样

我卡在这里被折磨了一天最后解决

我的博客

  • 可参考我的博客进行配置

https://lin-xiuer.gitee.io/

  • 具体代码放在GitHub

https://github.com/linweiqian/GitteeBlog.git

相关文章
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
88 0
Hexo+GitHub搭建个人博客
|
缓存 JavaScript 网络安全
使用Hexo在Github上搭建个人博客
使用Hexo在Github上搭建个人博客
114 0
|
JavaScript 网络协议 Shell
Hexo+GitHub+Vercel搭建个人博客网站
直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了
715 0
|
域名解析 前端开发 JavaScript
Hexo+Github+vercel 搭建个人博客教程(二)
这篇教程接上篇教程,在上篇教程的基础上在进行
1083 1
|
存储 运维 JavaScript
使用hexo在GitHub上搭建个人博客
使用hexo在GitHub上搭建个人博客
使用hexo在GitHub上搭建个人博客
|
开发工具 git
【Hexo】【Gitee】Hexo + Gitee搭建的个人博客如何在一个库里写博客和更新Gitee Pages?
【Hexo】【Gitee】Hexo + Gitee搭建的个人博客如何在一个库里写博客和更新Gitee Pages?
169 0
【Hexo】【Gitee】Hexo + Gitee搭建的个人博客如何在一个库里写博客和更新Gitee Pages?
|
JavaScript 网络安全 开发工具
避坑98%的Hexo博客安装以及部署发布到Gitee Pages全套服务
避坑98%的Hexo博客安装以及部署发布到Gitee Pages全套服务
避坑98%的Hexo博客安装以及部署发布到Gitee Pages全套服务
|
JavaScript Shell 开发工具
搭建个人博客-hexo+github详细完整步骤
自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家提前有个心理准备 - _-)
187 0
搭建个人博客-hexo+github详细完整步骤
|
缓存 JavaScript 程序员
使用hexo和github搭建个人博客网站详细流程
机缘巧合了解到了个人博客这个东西,之前试过一次,但是因为某些原因,让我放弃了,感觉太难了,但是这次下定决心,花了很长的时间终于是搞定了,虽然找到了很详细的教程,但是也遇到了很多的问题,主要还是要细心,同时出现了问题其实都可以搜索到解决方法,下边将自己的搭建过程做一个记录。 先附上大佬教程:https://huahuipj.github.io/2021/08/20/shi-yong-github-bu-shu-yi-ge-jian-dan-de-bo-ke/
使用hexo和github搭建个人博客网站详细流程
hexo+GitHub搭建个人博客之创建仓库
hexo+GitHub搭建个人博客之创建仓库
512 0
hexo+GitHub搭建个人博客之创建仓库
下一篇
无影云桌面