不用花一分线,松哥手把手教你上线个人博客

这个博客的所有资金投入就是几十块钱买了一个域名,再就没花钱了。站点托管在 GitHub 上,评论系统也用了 GitHub 来做,如果你能接受 GitHub 提供的默认域名,那你甚至连域名都不用买了,接下来我们就来看看这个东西怎么实现。

如果大家玩过松哥的微人事(https://github.com/lenve/vhr)或者 V 部落(https://github.com/lenve/VBlog),那么对于 hexo 上手可能非常容易,因为这个里边也使用了 nodejs,和微人事的前段操作有很多相同的地方。

[](()博客搭建


用 Hexo 搭建,要是有一点点前端 Node 的使用经验更佳,没有当然也没关系,因为与之相关的命令并不多。使用 Hexo 需要提前在电脑上安装好 Node 和 Git ,安装成功后,就可以开始 Hexo 的安装了。步骤如下:

  1. 安装 Hexo

npm install -g hexo-cli

  1. 在本地创建一个博客目录

hexo init blog

上面这个命令执行完后,会在本地创建一个 blog 目录,这里边就是独立博客所必须的一些文件,然后进入到这个目录中,执行 npm install 命令,安装相关的依赖。

安装完成后,会生成如下目录:

.

├── _config.yml

├── package.json

├── scaffolds

├── source

| ├── _drafts

| └── _posts

└── themes

这里几个文件/文件夹,我们先来关注其中两个 _config.yml 和 themes 目录, _config.yml 文件中,我们可以做网站的一些基本配置,例如 网站的 title,描述,关键字、图标等,这些配置大都见名知意。如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLnH0jwr-1651821912322)(https://imgco 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 nvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ3ODEwLzIwMjAwMS83NDc4MTAtMjAyMDAxMDYxMDQwMDA4MjktMTEzNDkyNDQ1Mi5wbmc?x-oss-process=image/format,png)]

配置完成后,定位到 blog 目录,执行 hexo s 就可以在本地启动项目了,启动成功后,浏览器中输入 http://localhost:4000 就可以看到网站了。

说到 hexo s 命令,这里有几个常用命令需要给大家介绍下,分别是:

| 命令 | 简写 | 中文含义 |

| :-- | :-- | :-- |

| hexo server | hexo s | 本地启动 |

| hexo generate | hexo g | 生成静态文件 |

| hexo deploy | hexo d | 部署网站 |

| hexo clean | | 清除缓存和已经生成的静态文件 |

这四个算是松哥这两天使用最多的命令,其他的命令,大伙可以参考[https://hexo.io/zh-cn/docs/commands](()。

[](()修改主题


一般来说,主题都会自己配置一个,个人感觉 Hexo 的生态还是比较丰富的,有很多可选的主题,Hexo 默认使用的主题是 landscape ,松哥最早使用了 hexo-theme-next 主题。博客在本地跑起来之后,接下来就是修改主题,主题修改的第一步就是先选一个自己认为好看的主题,选好之后,首先将之克隆到 ./themes 目录下,这个目录下原本有有一个 landscape 文件夹,里边放的默认的样式,当然开发者也可以直接将主题文件下载好拷贝进来,但是我还是建议使用 clone ,使用 clone ,假如有一天这个主题更新了,只需要 pull 一下就可以获取到最新样式了。

以 hexo-theme-next 主题为例, clone 命令如下:

cd your-hexo-site

git clone https://github.com/iissnan/hexo-theme-next themes/next

克隆成功后,修改 hexo 的 _config.yml 文件,将主题修改为 next,如下:

Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: next

主题创建好之后,接下来就是对主题的配置了,这个比较容易,直接参考[官方文档](()即可。配置完成后,执行如下命令,即可看到新的主题效果:

hexo clean

hexo g

hexo s

命令含义可以参考上面的表格,这里不再赘述。

这个 next 主题我大概用了两三个月,现在换成了 icarus,大家在主题配置的时候,只要会配置一个,其他多个肯定也就没有问题了。

[](()绑定到 GitHub


大家可能已经迫不及待想要把博客上传到 GitHub 了,绑定到 Github 步骤也很简单,首先以 自己的GitHub ID.github.io 为名创建一个 public 仓库,例如我的 ID 为 lenve,创建的仓库如下:

创建成功之后,修改 hexo 的 _config.yml 文件,配置 GitHub 地址,如下:

deploy:

type: git

repo: git@github.com:lenve/lenve.github.io.git

branch: master

这里根据自己的地址来配置即可,配置完成后,执行如下命令:

hexo g

hexo d

创建成功之后,修改 hexo 的 _config.yml 文件,配置 GitHub 地址,如下:

deploy:

type: git

repo: git@github.com:lenve/lenve.github.io.git

branch: master

这里根据自己的地址来配置即可,配置完成后,执行如下命令:

hexo g

hexo d

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值