前端小白搭建Hexo博客经验--mac

用户4915163449181
229 阅读10分钟

前言

学习前端有一段时间了，我一直都想搭建一个属于自己的博客，在经历了总体两天的时间，期间遇到了许多的问题，最后终于搞定了属于自己的博客。也是想将自己的遇到问题的解决方法分享出来，以便后续想搭建博客的朋友少踩一些坑。

因为是使用mac电脑搭建的博客，部分会跟Windows会有不同望理解

一、背景

  1. 搭建博客的原因
  2. 学习前端期间有使用过印象笔记，有道笔记等工具记录笔记，但用起来总感觉作出的效果不是很好就有了搭建博客的想法
  3. 可以DIV博客的内容、外观功能等
  4. 希望更多的人看到自己的文章
  5. 整个过程使用的时间
  6. 刚开始百度参考了各路大神的文章，每篇文章问题的缺陷不同，自己又踩了许多坑才完成
  7. 用了大概两天的时间，完成了博客的搭建和主题的修改
  8. 环境配置
  9. mac系统
  10. github账号，hexo框架配置
  11. 搭建方式
  12. 使用hexo框架进行网站的构建，之后部署到免费的GitHub上

二、GitHub配置

  1. 登陆github/，没有账号可以注册一个（之后需要用到，记住用户名）
  2. 主页中点击右上角自己的图标，点击Your profile

​

编辑

添加图片注释，不超过 140 字（可选）

  1. 点击New repository，新建一个

​

编辑

添加图片注释，不超过 140 字（可选）

  1. Repository name(填写自己的名字，推荐都用小写，刚开始创建的时候用的首字母大写，期间用大写访问时，就是进不去，后续就直接删除了重新创建了全是小写，就可以正常运行) yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了),下图中报错是因为我已经用过了这个名字，大家填写自己的名字不会遇到这个问题，然后点击createrepository进行下一步

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

  1. 点击自己的这个repository，然后找到settings

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

  1. 下拉找到Pages, 其中上面红框中的即为你的博客地址，在另张图中下面红色框中可以进去选择自己的主题样式, 此时github中的基本配置已经完成

​

编辑切换为居中

截屏2022-11-14 22.11.07

这张图中点击这个静态站点生成器在里面点击选择

​

编辑

截屏2022-11-14 22.13.43

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

三、环境的搭配

  1. 安装 Node.js 安装完成后终端输入

node -v

npm -v

查看版本号，如存在则表明配置成功

  1. mac系统：下载Xcode会自带Git环境，Windows用户需要自行下载Git
  2. 安装完成后，通过git命令查看自己的用户名和邮箱是否和自己github中的一致，如不一致请自行更改，如查询到多个用户名须删除没用的用户名，如查询后没有任何反应则表明还没有配置用户名，用下面的修改或者添加用户名命令即可，如提示其他之类的可先执行命令 git config，然后再执行以下命令即可成功,附查看和更改命令（其他命令可自行百度查找）：

查看用户名： git config --global user.name

查看邮箱： git config --global user.email

删除用户名 git config --global --unset user.name 要删的用户名

增加用户名 git config —global —add user.name 新加的用户名

修改用户名 git config --global user.name 用户名

修改邮箱 git config --global user.email 邮箱

  1. 终端中输入 npm install -g hexo-cli(如提示无权限即下图红色框中permission denied，则输入sudo npm install -g hexo-cli,后输入电脑密码enter即可)

​

编辑

添加图片注释，不超过 140 字（可选）

​ 这个过程会比较久，如果出现WARN错误可以忽略。我记得当时，每次都会出现说有 一个依赖包已经不更新，这个不影响。执行完成后，使用 hexo -v 查看是否安装成 功，如下图所示，即表明已经成功安装上

​

编辑

添加图片注释，不超过 140 字（可选）

四、网站代码以及设置

  1. 在桌面创建一个文件夹，名字自定义如：hexo，终端cd进入hexo文件夹
  2. 输入hexo init blog（如出现warn错误可忽略，不影响）
  3. _config.yml, 网站的配置信息，可以在此配置中配置大部分的参数
  4. source，资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
  5. themes，主题 文件夹。Hexo 会根据主题来生成静态页面。
  6. 等待提示Start blogging with Hexo，就是安装成功了
  7. 文件夹中自带一篇文章“Hello World”
  8. 命令行cd进入blog目录下
  9. 输入hexo g，生存静态文件
  10. 输入hexo s，启动服务器。默认情况下，访问网址为：http://localhost:4000/ 此时服务器开启，如需关闭Ctrl+C

注：hexo s 命令开启的是本地服务，开启后，则可以使用上述地址访问，如关闭，则上述地址访问不到，本功能旨在用来检查修改的配置是否成功，如打开查看后发现没有问题则可以部署到服务器上，之后再用你的博客地址访问即可看到最新的设置效果。 如上传服务器之后立即查看博客可能没有立即变化，可尝试多刷新几次或重新打开浏览器即可

  1. 新打开一个终端，输入：ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路来enter过来，中间有的问题是选y/n的，选y即可，最后得到信息中找到这句话：

Your public key has been saved in /Users/zjjk/.ssh/id_rsa.pub.

找到该文件（上句中in后边几位该文件的地址,打开（使用sublime text或其他编辑器），Ctrl + a复制里面所有内容，然后进入Sign in to GitHub：github.com/settings/ss…

一步步操作：New SSH key ——Title：blog —— Key：输入刚才复制的—— Add SSH key

注：此过程是生成ssh key，如后续再次执行此命令时，则需要把新生成的SSH key再配置到github中，因为新生成的SSH key会覆盖之前的，如不去github中替换会导致后续上传git服务器过程中失败

五、博客网站配置信息

  1. 进入blog文件夹，用sublime打开_config.yml文件，此文件为博客的配置信息，在此修改参数。（特别注意：每个参数的后面都要加个空格）
  2. 按照自己的信息进行基础设置
title: 小喵的博客
subtitle: 小白的技术成长之路
description: 小白的技术成长之路
author: 小喵
language: zh-CN
timezone: Asia/Shanghai
  1. 在_config.yml文件中找到 deploy配置处（一般在最下面，默认的显示可能不全，需按照下方示例自己添加）, username替换成你自己的username, repository的地址为你在github中创建的那个项目的地址，可去github中复制

​

编辑

添加图片注释，不超过 140 字（可选）

  • deploy: type: git repository: git@github.com:swonone/swonone.github.io.git branch: master

​ 保存完毕。

  • 各类主题的配置信息，要在主题文件夹内的_config.yml上进行配置！后续会以next主题为例进行示范，此处可忽略。

六、发表文章

  1. 终端 cd 进入blog文件夹下，输入hexo new "Hello blog"(Hello blog为你的文章名，可自定义)
  2. 打开返回的文件地址，打开文件（也可在blog文件夹下 source/_posts/Hello blog.md 中找到你刚才创建的文件）
  3. 文章内容采用Markdown语法进行编辑，需要用相关软件才能打开这个文件，本人使用的软件为MacDown mac版, 大家可根据自己习惯下载喜欢的工具(附：Markdown语法使用说明)
  4. 打开文件编辑：

title: Hello blog date:

只输入title字段即可，后续其他字段可根据主题再添加（注意：title后面需加空格）

  1. 打开终端执行以下步骤：

$ hexo clean INFO Deleted database. INFO Deleted public folder.

$ hexo generate INFO Start processing INFO Files loaded in 1.48 s ... INFO 29 files generated in 4.27 s

$ hexo server INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

此处散步时进行本地配置完成后，在本地打开查看刚刚修改的配置是否修改成功，三处命令也可以这样写 hexo clean hexo g hexo s

  1. 打开 http://localhost:4000/后检查，如没有任何问题可以部署到服务器上

$ hexo deploy INFO Deploy: git

​ 此时可能会出现 error deployer not found:git 的错误，输入以下代码

​ npm install hexo-deployer-git --save(如提示无权限错误则输入sudo npm install hexo-deployer-git –-save，后输入电脑密码enter即可)

​ 再次执行 hexo deploy

​ 其中，可能会出现github登录界面，正常填写就行(这里我一直登陆着github，暂时没有遇到)

​ 完成，终端可Ctrl+C关闭本地服务，然后打开 username.github.io 即可访问自己的博客（username为自己的github的用户名）

七、主题设置

主题设置，最眼花缭乱的地方，有各种各样的主题，可以进行很多的挑选，这次主要是用在官方hexo主题大全，里面有许多主题都能尝试一下。

在这里推荐几个主题：

  • next官网,Git(我用的就是这个啦，十分推荐！）
  • Material官网，Git
  • 主题配置，在官网找到对应的主题首先要下载主题，到相应的Git链接
  • 下载完以后将文件解压缩后放到blog中的themes文件夹中 ![截屏2022-11-15 00.00.49](/Users/jack/Desktop/截屏2022-11-15 00.00.49.png)
  • 修改主题文件夹名称，将其改为 next(名称为你的主题的名称，可自定义，无硬性要求，下以next为例) 。 然后打开配置文件（/blog/_config.yml），找到 theme 字段，并将其值更改为 next(你刚才自定义的名称, 注意theme后加空格)，保存关闭

  1. 接下来，打开主题相应的博客中的文档说明，对比“主题”中的_config.yml（ /blog/themes/next/_config.yml ），针对自己需要的功能进行相关设置
  • 有关设置中的图片，统一放到主题文件夹(/next/)内\source\img。在设置中，用”/img/xigua.png”类似格式进行图片设置。
  • 设置时切记 : 后面要加一个空格。这个坑有点恼人~
  • 最后再重新进行一次，hexo clean,hexo g,hexo s,hexo deploy 整个博客就完成主题修改啦

八、总结

  • 用了两天时间搭建了博客和写了这篇文章，写到这里真的不容易，搭建过程中遇到了很多问题，各种百度搜索，问题比较杂乱，故写此文将遇到的坑写出来，大家以后遇到查到了这篇文章，可以很快处理这些问题就感到超值。
  • [小喵的博客]（swonone.github.io/）
avatar
文章
阅读
粉丝