零成本从零开始搭建自己的博客

猩球中的木子
318 阅读3分钟

前言

在写作的过程中，发现别人的个人博客都很炫酷，有的时候就想拥有一个自己的个人博客，作为自己学习路上的小窝，在翻阅前辈们的文档后，发现是可以零成本实现的，至于怎么实现，请看下面步骤。

image.png

零成本实现个人博客第一步

开通个人的github账号，创建一个仓库和你的博客相关联。对这个仓库的名字是有要求的，必须是：your_github_username.github.io 格式，翻译就是账号名称.github.io，具体这块可以参考GitHub Pages 快速入门，注意这个仓库必须是Public的，例如下面这个：

1718539910572.jpg

零成本实现个人博客第二步

前端安装node，这个可以去node官方网站找，就不细说了，通过node -v 查看是否安装成功

image.png

零成本实现个人博客第三步

本地安装hexo项目

npm install -g hexo-cli

安装完成之后初始化hexo项目

hexo init

然后在项目下面下载安装依赖文件

npm i

此时你已经得到一个可以运行的本地博客项目了，如下

image.png

我们来关注一下主要的几个目录如下

HEXO-BLOG     项目根文件夹
    --public  md文档生成的静态html
    --source  md存放目录
    --themes  博客主题存放目录
        --config.yml  博客主题的配置项
    --config.yml 博客的配置项

零成本安装个人博客主题第四步

博客项目是下载并安装了，可是我们需要一款自己心动的博客主题，我就看中了一个二次元的图纸，如下这款的壁纸我就比较喜欢

image.png

如下就是安装博客主题的命令

cd themes
git clone git@github.com:theme-particlex/hexo-theme-particlex.git particlex --depth=1

如何启动博客，常用的命令如下

hexo s       --启动本地博客，如果只是本地预览博客内容，可以不用前面两步，直接启动即可
hexo s -p 5000  --本地启动时端口被占用时，我直接默认成5000端口启动，这个看大家

修改根目录的_config.yml文件

设置网站的标题和描述以及语言 image.png 开启代码高亮和禁止代码格式化

image.png 配置使用的主题和上传的代码仓库 仓库地址的格式是@github.com:your_github_username/your_github_username.github.io.git

image.png

配置ssh秘钥key，方便后续上传代码到github

第一步：ssh-keygen -t rsa -C "你的邮箱"
--默认生成在电脑的C盘下面的 /Users/xxx/.ssh/id_rsa
然后
第二步：添加git地址git remote add origin git@github.com:your_github_username/your_github_username.git
GitHub 中添加 key
第三步：登录 github.com -> Account Settings -> SSH and GPG Keys -> NEW SSH Key  粘贴生成的id_rsa的秘钥
第四步：验证 key
ssh -T git@github.com
第一次验证会出现
Are you sure you want to continue connecting (yes/no)?
输入 yes 回车
弹出密码输入框，输入密码，输入你创建KRY 时的密码
控制台打印出”You've successfully authenticated, but GitHub does not provide shell access.“ 信息时，表明key 配置好了

如何生成内容并部署github

hexo clean   --清理编译生成的html，一般改动了文章内容需要重新发布之前都需要清理重新生成最新的
hexo g       --编译生成html，需要上传github的
hexo d       --上传到github仓库
验证github内容
https://your_github_username.github.io/

遇到的问题

//报错extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug
//使用
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive -save -d

总结

介绍到这里，我们就通过hexo+github搭建了一个个人博客，我们有了自己的博客小窝存放自己的博客文章。这里我没有介绍购买域名和配置域名，因为那个要钱，我们先用免费的试试，主打一个免费，安逸。如果有时间未来会补充实现一些css特效，比如鼠标点击爆星星，鼠标滑动彗星轨迹，流星背景等，实现评论以及进行seo优化。

avatar
文章
阅读
粉丝