😍手把手教你怎么搭建一个博客😍

🍻 不见五陵豪杰墓,无花无酒锄做田

前言

选择GitHub Pages作为自己博客的原因就是他是完全免费的,不需要自己花钱买云服务进行搭建,支持的主题也是非常多的,当然咱们写博客最主要的一点就是创作,搭建成功之后,我们只需要考虑,怎么写好别人能看懂的并且快速、简洁、方便维护的博客就好啦(这就用到了hexo),搭建过程还是需要一点点时间哒😋。

1 万事开头难😖

基本流程

  • 注册一个github账户
  • 创建一个特殊的github仓库,搭建简易版的GitHub Pages博客(后面会说有多特殊)
  • 如何更新博客内容。
  • 了解hexo的基本语法和使用
  • 结合hexo博客框架实现一个快速、简洁且高效的博客

注册一个github账户

进入github按照步骤填写基本信息,github会给你的邮箱发一个验证码进行验证,验证成功之后这时你就拥有了属于你自己的github账户😕(我github账户这里面都是之前写的垃圾,大佬嘴下留情)

注册☝

注册成功☝

搭建简易版的GitHub Pages博客

为什么说是一个特殊的github仓库呢😇,因为她对应的仓库名的格式是 username.github.io(username代表的是你的github注册时填写的名字)

新建仓库☝
仓库创建成功之后点击Settings进入到设置界面一直往下拉会看到GitHub Pages 标签块,下面有你github Pages的访问地址,点击之后你就会发现你裸奔的博客诞生了🤗.毕竟我们的博客是给人看的 我们还是穿个衣服比较好,点击choose a theme 会有一堆主题任你选择,随便选一个你的博客就会穿上新衣服啦🤣

进入设置☝

找到GitHub Pages标签☝

裸奔博客☝

选择主题☝

穿衣博客☝

起仓库名称的时候需要注意下面两个问题

  • 如果你起的仓库名称是xxx.github.io(xxx不是你的github用户名)那么你的访问地址就会变成username.github.io/xxx.github.io🎨。也不是不可以就是不美观👀
  • 如果你起的仓库名称是随便起的例如就叫一个test,当你点击Settings的时候就会询问你是否要把当前项目升级成GitHub Pages
  • 所以我们还是老老实实按照人家的规定来起名字。与其他业务级的项目区分开,博客就是一个独立的静态网站,按照规则办事。🎈

更新博客内容

注:前提条件你的电脑已经配置了git的相关配置(否则会无法使用git命令哦)具体怎么配置就🤞廖雪峰大佬的git教程就可以很完整

  • 现在穿上衣服的博客内容我们要修改应该怎么办呢🤫(就是把大象放进冰箱里面的道理是一样的),首先应该先把冰箱门打开(找到项目地址把项目clone到本地)🍕。
    找到项目地址☝

  • 第二步把大象放到冰箱里面(修改项目中的部分代码,例如这个我们就将welcome。。修改为欢迎来到我的博客)🍔。
    克隆项目☝

  • 第三步把冰箱门关上(将修改之后的文件再次提交到github)🍟,这时再次访问你的地址(username.github.io)你就会发现你修改的内容已经被更新了(项目更新之后github pages 可能会有延迟。喝杯茶水的时间就更新好了。)😁
    提交项目☝

至此,你的简易博客就完成啦🧐,虽然说目前只是一个简易版的小博客,不过你想有一个漂亮的简历到此就可以为止啦,自己弄弄排版。这样的在线简历不是比pdf那种简历强多啦,开动你的脑瓜吧😎。

2只要肯登攀😝

hexo的安装以及hexo的基本用法

准备工作

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

安装Hexo

1
2
3
4
5
npm install hexo-cli -g //全局安装hexo,如果安装特别慢可以使用cnpm局部安装:npm install hexo
hexo init blog //初始化博客
cd blog // 进入到指定目录
npm install // 安装依赖
hexo s // 运行项目

浏览器访问localhost:4000就可以看到初始化的博客啦(hexo是适配手机端的哦✨)

Hexo重要配置

1
2
3
4
5
6
7
8
9
10
title: drinkwd的个人博客 # 网站标题
subtitle: '欢迎来到drinkwd的个人博客' # 网站副标题
description: '我曾踏足山巅,也曾进入低谷,二者都让我受益良多' # 网站描述
author: drinkwd # 作者
url: https://drinkwd.github.io/ # 你网站的网址 不可以省略前面的http/https
theme: landscape # 可以修改主题(不是直接修改名称,需要按照文档步骤进行操作)
deploy:
type: git # 部署类型可以是多个如果是github写git就可以
repository: https://github.com/drinkwd/drinkwd.github.io.git # 仓库地址
branch: main # 远程分支

主题修改

这个主题修改活活我是弄了2个多小时🧭选择恐惧症,真的是不知道哪款主题比较适合自己,即想酷炫又想简约May the force be with you(别太放肆没什么用👑)最后选了fluid中文文档,各种配置文件说的特别细,感谢作者大佬🧎‍♂️按照网站的教程一步一步的操作就可以打造一个酷炫又满足使用的博客。客官我上图了🙆‍♂️。

Hexo常用命令

本地查看效果

1
$ hexo s

新建文章

1
$ hexo new <title>

新建页面

1
$ hexo new page <title>

推送至github

1
$ hexo deploy

如果执行hexo d的时候发生了如下错误说明你没有安装hexo-deployer-git插件,在工作目录下把插件安装上就好了

1
$ cnpm install hexo-deployer-git --save

注意事项

如果你在执行hexo d的时候会让你输入账号和密码每次都会提示特别浪费时间,填写的是github的用户名和密码 我知道的两种解决方案🍦

  • 使用vscode的终端进行推送(好活🎨),vscode会提示你绑定github账号,这样每次登陆的时候vscode的就帮助验证了🤪。
  • 设置ssh也是在学习git的时候必要的,一步这时还是要再一次拿出廖雪峰大佬的git教程了🤪。

执行hexo d之前最好先执行一下hexo clean(清楚缓存文件和静态文件,要不然有可能会更新的还是之前版本的文件)或者也可以这么使用 hexo clean && hexo d

总结

写博客的过程还是很开心的。虽然费点时间但是授人予鱼的过程也是自己更加深入学习的过程。一起加油🎉。
年轻人 🎈May the force be with you🎈

本文参考

hexo

GitHub Pages一个最基础的个人网站

fluid