搭建个人Hexo博客-基础篇
搭建个人博客这件事我已经考虑很久了(怎么说也是混着这个圈子玩的,怎么能没有自己的博客呢233),高二的时候有过想法,但一直到高中结束也没能实现。现在高中毕业正值假期,就搭个博客。反正就是闲的无聊
除了上面的原因,还有一个比较现实的理由,就是找工作,虽然说我现在所学的专业和我原本所期望的计算机专业不同,但未来我也很有可能去抢学IT同学的饭碗(笑),多一个博客可以让你在竞争时加分容易抢饭碗,咳咳,就这样。至于为何我会知道这个。为什么程序员必须写技术博客?以及如何写?博客在面试时的加分可不是一点点-B站UP主CodeSheep你可以看看这个,我个人觉得挺好。
搭建一个个人博客并不困难~~(除了对我这样的初学者,美化博客BUG一大堆,各种乱起八糟的balabalabala)~
搭建好部署到远端,可以给其他人访问是基础的操作,之后还可以给博客换主题,这就是后话了,我会逐步分享的
这我不知道,反正闲着无聊,就当写日记了,总有人会来看吧
痛 并 快 乐
接下来就是正题了,我会慢慢一期一期更新的
***(这篇教程通篇都是基于Windows系统下进行的,也会涉及到Linxu的部分命令)***
本人搭建Hexo博客参考视频资料手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo–B站UP主codesheep这个教程做的很好,你们可以参考我的过程以及他的过程结合来看
你,电脑,不怕麻烦的脑子
Node.js:node.js官网
Git:Git官网
Node.js选择LTS版(长期支持版)就可以了
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Git(读音为/gɪt/。bai)是一个开源的分布du式版本控制系统,可以有效zhi、高速地处理从很小到到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
你可以把这东西当作一个命令行使唤,可以在Git Bush下运行Linux的命令,但除了这个作用,就是为hexo环境(应该是,在我安装Hexo时要求我必须装Git)
Hexo是基于node.js环境的静态博客,所以必须装node.js
在Node.js安装好后,会同时安装npm,npm是随同Node.js一起安装的包管理工具,能解决Node.js代码部署上的很多问题
(其实就是个软件安装器)
你可以通过以下指令来查看其是否安装好
node -v #查看node版本 npm -v #查看npm版本效果是这样的
如果上边的安装不会,就去问度娘吧,网上教程很多
在正式搭建开始前,你还需要借助npm来安装cnpm,即国内镜像源,因为众所周知的原因~~(墙太高)~~,原npm下载速度太过缓慢,所以改用cnpm会更快
npm install -g cnpm --registry=http://registry.npm.taobao.org #安装淘宝的cnpm同样你可以借助查看软件版本来检查是否安装成功
cnpm -v #查看cnpm版本搭建过程十分简单
当然你也可以在cmd命令行界面下进行创建
cd /d d:/ #进入D盘 mkdir blog #创建blog目录 cd blog #进入D盘中的blog文件夹在准备环节我们已经安装了cnpm,所以以下就使用cnpm来安装hexo
cnpm install -g hexo-cli #安装hexo框架你也可以通过npm来安装
npm install -g hexo-cli #通过npm安装hexo框架同样,你可以通过检查版来确认是否安装成功
hexo -v #查看hexo版本使用cmd或git bush进入d:/blog,进行博客初始化操作
hexo init #初始化博客你也可以直接输入路径
hexo init <folder>初始化完成后会生成一些文件
我因为之后美化+装插件以及下面自己放了俩脚本,所以现在看到这些只有部分是初始化完成后生成的文件
以下是Hexo官方给出的初始化完成后,指定文件夹的目录下的文件:
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themeshexo博客根目录下的_config.yml是博客的配置文件,后续可以对它进行修改,来实现一些功能
我们这里暂且只实现一些简单功能,下一篇我会讲美化装主题
如果你对其他文件或文件夹有疑惑,你可以通过查阅Hexo官方文档-建站来了解
你可以参考Hexo官方文档-配置对你的配置文件进行修改
这里放一部分我自己的,你可以对照我的博客来进行参考
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Tracker subtitle: Tracker`s blog description: 极客,大学生 keywords: 极客 author: 张百川 language: zh-CN timezone: # URL ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/' url: https://baichuan2077.top root: / permalink: :year/:month/:day/:title/配置完成后,你就可以在本地查看博客效果了**(注意要在Hexo根目录下)**
hexo generate #生成博客静态文件 hexo g #生成博客静态文件,也可以这样简写,执行的效果是相同的 hexo server #启动服务器,即本地部署 hexo s #命令简写上面的是效果,第一次生成并不会有太多文件,我的图片仅供参考
上面的https://localhost:4000 即为本地访问地址,按Ctrl+C可以停止服务
下面是参考效果:
(今天写不动了,明天继续 20/10/3)
我们这里在coding上部署,虽然我个人最先是在GitHub上部署了,但因为众所周知的原因,国外访问会很慢
如果你对怎样在GitHub上部署Hexo博客感兴趣,你可以去上面找CodeSheep的视频
首先你需要有一个coding官方账号,你也可以通过微信直接登录,你可以点击这里前往Coding官网
创建完成登录后会进入工作台界面
点击右侧项目–>创建项目–>DevOps项目
项目名称可以自己随便写,我这里以blogs为例,项目标识和项目名称一致就可以了
创建完成项目后,点击左侧代码仓库–>新建代码仓库
完成后确认就创建好了
创建好后,不进行初始化也可以,复制好这串仓库地址,一会儿部署时需要用到
要把博客部署到Coding前我们还需要装一个插件,你可以通过以下命令来安装:
cnpm install --save hexo-deployer-git #安装git部署插件(注意要在Hexo根目录下)安装完成后,我们需要打开hexo博客根目录下的_config.yml来配置**(该内容在配置文件最下方)**
#配置_config.yml ----- # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: https://e.coding.net/track/blogs/blogs.git #这里填写你的Coding代码仓库地址这里以上边创建的为例 branch: master -----下面是我的,由于我对多个仓库都进行了部署,你们可以参考我的来多仓库部署:
# Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy: type: git repo: coding: https://e.coding.net/track/blog/blog.git github: https://github.com/baichuan2077/baichuan2077.github.io.git # gitee: https://gitee.com/baichuan2077/blog branch: master配置完成保存后就可以准备上传博客了
hexo deploy #部署到远端 hexo d #部署到远端,简写推荐每次部署时执行以下命令
hexo clean #清除网页缓存 hexo generate #重新生成 hexo deploy #部署到远端上传过程中需要输入账号和密码(Coding)
上传完成后刷新仓库你就可以看到文件了
(昨天写在半夜,看配置页面改了,今天再写)(新版权限很迷惑,有点搞不来)
点击这里查看旧版官方文档
这里官方有详细的教程,我就不写了
新版总是会报错,部署失败,在运行Shell脚本那一步,我查看日志中提到用户权限不足,但实际权限是有的,我用了主账户,如果有大佬看到麻烦在评论中给我讲解一下
点击这里查看新版官方文档
基础篇到这里就算结束了,第一次写,文章肯定会有很多不足之处,希望大家多多指正,如果有问题或者指正的地方请在下方评论区留言
下次写个人美化博客的过程
—2020/10/7
—个人网站baichuan2077.top欢迎来玩啊wwww
本篇文章用到的参考资料:
手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo—codesheep
Hexo中文文档
Coding官方帮助中心文档
