hexo搭建个人博客

安装Git

  • 下载地址
  • 安装步骤:一路next
  • 安装完成后输入git version查看版本,看到版本号说明安装成功
$ git version
git version 2.25.0.windows.1

安装Node.js

Hexo是基于Node.js制作的静态博客,我们要用到Node.js里面的npm(node package manager)包管理器来安装插件。

  • 下载地址
  • 安装步骤:一路next
  • 安装完成后输入node -vnpm -v查看node和npm的版本
$ node -v
v12.16.1

$ npm -v
6.13.4

安装Hexo

  • 安装cnpm,提升下载速度:(安装后可用cnpm -v查看版本号来验证是否安装成功)
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装Hexo
$ cnpm install -g hexo-cli
  • hexo -v查看版本验证是否安装成功
$ hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.16.1

初始化hexo

  • 新建一个blog(文件名随便起)文件夹,右键Git Bash Here打开终端,输入Hexo初始化命令hexo init
$ hexo init

初始化需要一定的时间…

  • 初始化完成后打开文件夹可以发现多出了很多目录,其中
    scaffolds:生成文章的一些模板
    source:用来存放你的文章
    themes:主题
    _config.yml: 博客的配置文件
  • 启动hexo服务
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

这样就可以在浏览器输入:localhost:4000来访问你的博客。

hexo s失败先试一下cnpm install hexo-server,不行的话把blog文件夹里的node_modules删掉再重新cnpm install

打开后是这样
在这里插入图片描述

  • 用hexo写一篇博客
$ hexo n "我的第一篇博客"
INFO  Created: ~\Desktop\blog\source\_posts\我的第一篇博客.md

创建完成后用编辑器进入目录编辑
在这里插入图片描述

  • 编辑完成后保存文件,用hexo生成网页并重启hexo服务
$ hexo generate       # 生成静态网页 简写:hexo g
$ hexo server         # 启动服务 简写:hexo s

在打开浏览器输入localhost:4000
在这里插入图片描述

将博客部署到线上

上面访问的localhost:4000是本地服务器端口,我们的博客是不可能放在本地服务器的,我们需要把它部署到远端,这里推荐部署到Gitee上。

  • 进入码云新建个人仓库
    在这里插入图片描述

可以将仓库名设置成和账号的英文名称一致,部署到线上的地址后面就不会有/***之类的后缀了

  • 先安装一个hexo插件
cnpm install hexo-deployer-git --save 
  • 打开hexo的配置文件_config.yml,在最后面deploy里添加以下配置
    在这里插入图片描述

  • hexo上传到gitee的远端仓库

$ hexo d

上传完成后刷新码云仓库可以看到多出很多文件
在这里插入图片描述
接着打开右上角->服务->Gitee Pages,点击启动
在这里插入图片描述
点击右面生成的地址,就可以打开自己的博客了
在这里插入图片描述

初次部署到Gitee上可能遇到的css样式不生效问题

如下图进入到配置文件把url改一下即可
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值