搭建个人Hexo博客-基础篇

    科技2026-01-09  11


    搭建个人Hexo博客-基础篇

    现在高中毕业正值假期,就搭个博客。

    在正式写我搭建博客的过程之前的闲聊

    1.关于我为何要搭建这个博客

    搭建个人博客这件事我已经考虑很久了(怎么说也是混着这个圈子玩的,怎么能没有自己的博客呢233),高二的时候有过想法,但一直到高中结束也没能实现。现在高中毕业正值假期,就搭个博客。反正就是闲的无聊

    除了上面的原因,还有一个比较现实的理由,就是找工作,虽然说我现在所学的专业和我原本所期望的计算机专业不同,但未来我也很有可能去抢学IT同学的饭碗(笑),多一个博客可以让你在竞争时加分容易抢饭碗,咳咳,就这样。至于为何我会知道这个。为什么程序员必须写技术博客?以及如何写?博客在面试时的加分可不是一点点-B站UP主CodeSheep你可以看看这个,我个人觉得挺好。

    2.搭建一个博客难么?

    搭建一个个人博客并不困难~~(除了对我这样的初学者,美化博客BUG一大堆,各种乱起八糟的balabalabala)~

    搭建好部署到远端,可以给其他人访问是基础的操作,之后还可以给博客换主题,这就是后话了,我会逐步分享的

    3.你这博客有人看么?

    这我不知道,反正闲着无聊,就当写日记了,总有人会来看吧

    4.搭建过程中感觉怎么样

    痛 并 快 乐


    接下来就是正题了,我会慢慢一期一期更新的

    搭建教程

    ***(这篇教程通篇都是基于Windows系统下进行的,也会涉及到Linxu的部分命令)***

    本人搭建Hexo博客参考视频资料手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo–B站UP主codesheep这个教程做的很好,你们可以参考我的过程以及他的过程结合来看

    1.搭建博客所需材料

    你,电脑,不怕麻烦的脑子

    2. 准备环境

    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版本

    3.开始搭建

    搭建过程十分简单

    Ⅰ.本地部署

    1.创建一个用来存放博客的文件夹,例如blog,具体放在那里自己看,我放在了D盘

    当然你也可以在cmd命令行界面下进行创建

    cd /d d:/ #进入D盘 mkdir blog #创建blog目录 cd blog #进入D盘中的blog文件夹

    2.安装hexo框架

    在准备环节我们已经安装了cnpm,所以以下就使用cnpm来安装hexo

    cnpm install -g hexo-cli #安装hexo框架

    你也可以通过npm来安装

    npm install -g hexo-cli #通过npm安装hexo框架

    同样,你可以通过检查版来确认是否安装成功

    hexo -v #查看hexo版本

    3.初始化博客

    使用cmd或git bush进入d:/blog,进行博客初始化操作

    hexo init #初始化博客

    你也可以直接输入路径

    hexo init <folder>

    初始化完成后会生成一些文件

    我因为之后美化+装插件以及下面自己放了俩脚本,所以现在看到这些只有部分是初始化完成后生成的文件

    以下是Hexo官方给出的初始化完成后,指定文件夹的目录下的文件:

    . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes

    hexo博客根目录下的_config.yml是博客的配置文件,后续可以对它进行修改,来实现一些功能

    我们这里暂且只实现一些简单功能,下一篇我会讲美化装主题

    如果你对其他文件或文件夹有疑惑,你可以通过查阅Hexo官方文档-建站来了解

    4.简单配置

    你可以参考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/

    5.启动

    配置完成后,你就可以在本地查看博客效果了**(注意要在Hexo根目录下)**

    hexo generate #生成博客静态文件 hexo g #生成博客静态文件,也可以这样简写,执行的效果是相同的 hexo server #启动服务器,即本地部署 hexo s #命令简写

    上面的是效果,第一次生成并不会有太多文件,我的图片仅供参考

    上面的https://localhost:4000 即为本地访问地址,按Ctrl+C可以停止服务

    下面是参考效果:

    (今天写不动了,明天继续 20/10/3)

    Ⅱ.远端部署

    我们这里在coding上部署,虽然我个人最先是在GitHub上部署了,但因为众所周知的原因,国外访问会很慢

    如果你对怎样在GitHub上部署Hexo博客感兴趣,你可以去上面找CodeSheep的视频

    1.建立仓库

    首先你需要有一个coding官方账号,你也可以通过微信直接登录,你可以点击这里前往Coding官网

    创建完成登录后会进入工作台界面

    点击右侧项目–>创建项目–>DevOps项目

    项目名称可以自己随便写,我这里以blogs为例,项目标识和项目名称一致就可以了

    创建完成项目后,点击左侧代码仓库–>新建代码仓库

    完成后确认就创建好了

    创建好后,不进行初始化也可以,复制好这串仓库地址,一会儿部署时需要用到

    2.安装部署插件并上传博客到Coding

    要把博客部署到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)

    上传完成后刷新仓库你就可以看到文件了

    3.配置Coding静态网页

    (昨天写在半夜,看配置页面改了,今天再写)(新版权限很迷惑,有点搞不来)

    1> 旧版

    点击这里查看旧版官方文档

    这里官方有详细的教程,我就不写了

    2>新版

    新版总是会报错,部署失败,在运行Shell脚本那一步,我查看日志中提到用户权限不足,但实际权限是有的,我用了主账户,如果有大佬看到麻烦在评论中给我讲解一下

    点击这里查看新版官方文档

    Ⅲ.常用Hexo命令

    hexo n "标题" = hexo new "标题" #新建文章 hexo clean #清理网页缓存 hexo g = hexo generate #生成静态文件 hexo s = hexo server #启动服务预览 hexo d = hexo deploy #部署到远端

    后记

    基础篇到这里就算结束了,第一次写,文章肯定会有很多不足之处,希望大家多多指正,如果有问题或者指正的地方请在下方评论区留言

    下次写个人美化博客的过程

    ​ —2020/10/7

    —个人网站baichuan2077.top欢迎来玩啊wwww

    本篇文章用到的参考资料:

    手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo—codesheep

    Hexo中文文档

    Coding官方帮助中心文档

    Processed: 0.036, SQL: 9