WELCOME TO laowu's BLOG.

小白搭博客指南

字数统计: 1.7k阅读时长: 6 min
2024/04/16

这篇文章记录一下本人在完成开源第一次作业时，搭博客时遇到的一些问题及对应的解决办法。

1.博客主题及选取原因：

laowu一开始选取的是jekyll网站中的Hydejack模版，但是由于这个模版分为免费版和付费版，我下载完，搭建后的模版是属于免费版的不是很好看，所以laowu就取消了这个模板。而且在选择jekyll中的模板的时候，开发文档都是英文，对小白的laowu来说，不是很友好，所以，思索再三选择了hexo中的archer主题。界面示例如下图所示。

选取原因：

  • 这个界面支持中英文
  • 简洁大方，方便我自己的上传和维护。
  • 它结合了前者的侧边栏和后者的 UI 设计。您可以通过导航侧边栏切换到存档、标记和类别，而无需跳转到新页面。
  • 兼容性：现代浏览器和IE 10 +。

2.博客页面布局及其设计思路

  • 至少包括我的个人信息，侧边栏，about me ，文章首页和文章内容五个页面。
  • 设计思路：替换主页和文章和about页面的照片，修改个人信息界面，修改_config.archer.yml中的内容，实现文章导航栏、页面红色进度条、侧边tag、侧边搜索等多种功能。

3.博客功能实现及其技术选择

技术选择：hexo+algoria+git等。

功能实现流程：

  1. 首先刚接到这个搭博客的任务的时候，由于一开始我选择的是jekyll框架，所以，我跟着这个[链接](A Guide to Creating and Hosting a Personal Website on GitHub | Jonathan McGlone | Librarian, Product Designer, User Researcher, Digital Publisher, Accessibility Specialist, Music Enthusiast, Web Noodler. (jmcglone.com))学习了git、github和github pages相关的使用流程，并跟着做出了一个非常简单的blog。

  2. 之后，我决定套用jekyll中的模板，然后再多次尝试下搭建完成，但是太丑了，我决定从头开始搭建hexo中的archer模板。

  3. 首先考虑下载hexo，通过这个[链接](文档 | Hexo)，下载hexo，下载git（这里可以参考我之前的博客），以及配套的Node.js软件，本地最好有个markdown软件用于进行_config.yml的读取和配置，我这里使用的是sublime_text。好的，现在基本的需要用到的工具都下载到本地了。

  4. 在电脑本地的某一个目录里创建一个用来存放我需要搭建的blog，我这里将其放在了D盘的blog下，所以，先使用windows+r，输入cmd打开命令框，再使用下面的命令切换到这个目录，命令如下：

    1
    2
    D:
    cd blog

  5. 接下来，使用

1
2
npm install -g hexo-cli
hexo init my_blog

​ 命令对这个目录初始化，这样，就初始化了一个名为my_blog的hexo项目。

  1. 进入到新创建的Hexo项目目录，然后执行以下命令安装项目所需的依赖：
1
2
cd my-blog
npm install
  1. 找到archer开发文档界面，[链接](hexo-theme-archer/README.md at master · fi3ework/hexo-theme-archer (github.com))
  2. 按照他的要求，在命令行输入以下代码
1
2
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1
npm install hexo-generator-json-content

9.在_config.yml中添加以下字段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jsonContent:
  meta: true
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: true
    excerpt: false
    categories: true
    tags: true

这个操作我是使用sublime_text打开的_config.yml文件，命令：

1
sublime_text _config.yml

打开后记得按ctrl+s保存一下。

10.后面就按照这个主题的开发文档的要求，配置自己想要的东西，配置完成后，在本地输入

1
2
hexo generate # 忘了这个命令是不是必须要写的了，可以试试不写这个代码
hexo s

查看自己的静态博客。

11.然后就按照开发文档的要求，修修改改，然后发布到github pages上。

12.发布到github pages我是参考的chatgpt给出的命令：

chatgpt:

要将本地的 Hexo 静态文件保存到 GitHub Pages 中，并通过 username.github.io 访问，你需要执行以下步骤：

  1. 准备工作：

    • 确保你已经安装了Git，并在本地设置了 GitHub 的身份验证信息。
    • 确保你已经创建了一个名为 <username>.github.io 的空仓库（<username> 是你的 GitHub 用户名）。

  2. 生成静态文件： 在 Hexo 项目目录中执行以下命令，生成静态文件：

    1
    hexo generate

  3. 初始化 Git 仓库： 在 Hexo 项目目录中执行以下命令，初始化 Git 仓库并将生成的静态文件添加到仓库中：

    1
    2
    3
    4
    cd public # 这里注意，切换到public文件下，git相关的配置都在这个下面，以后每次都要先cd到public下面，也可以不选择cd public，也许，大概。
    git init
    git add .
    git commit -m "Initial commit"

  4. 关联 GitHub 远程仓库： 关联你的本地仓库和 GitHub 远程仓库：

    1
    git remote add origin https://github.com/<username>/<username>.github.io.git

  5. 推送到 GitHub Pages： 将本地的静态文件推送到 GitHub 远程仓库：

    1
    git push -u origin master

  6. 访问你的网站： 在浏览器中输入 https://<username>.github.io 即可访问你的网站。

这样，你的 Hexo 网站就会被保存到 GitHub Pages 中，并可以通过 https://<username>.github.io 访问。

  1. blog更新：直接一口气全放在代码里面了
1
2
3
4
5
hexo generate
cd public
git add .
git commit -m "Update files"
git push origin master

依次输入上面的命令，应该就能更新自己的blog了。

4.博客制作过程中遇到的问题及其解决方法

其实作为小白，以及只会cd 命令行的我，确实遇到了好多错误，但好在在互联网和chatgpt的帮助下，我好像也就是遇到几个没法解决的问题。

  • 第一个问题：
1
fatal: unable to access 'https://github.com/wuhongyyyy/wuhongyyyy.github.io.git/': Failed to connect to github.com port 443 after 21043 ms: Couldn't connect to server

原因：这个错误提示表明 Git 无法连接到 GitHub。

1
2
3
4
5
git clone git@github.com:wuhongyyyy/wuhongyyyy.github.io.git

# 或者：可能是没有登录
git config --global user.name
git config --global user.email
  • 第二个问题，图片无法加载到静态网站上：

原因：可能是因为本地的markdown既可以使用绝对路径，也可以使用相对路径，但是在静态网站里面，绝对路径失效，只能使用相对路径。

  • 第三个问题：

在使用algoria制作搜索功能时，在输入这个命令后报错

1
export HEXO_ALGOLIA_INDEXING_KEY='apiKey'

原因：windows下的apikey外面不需要加冒号。

其他：反正搭建时遇到了好多问题，我也是个小白，上面写的步骤可能还有错误。但是，chatgpt主基本上能解决大部分问题，chatgpt主万岁！！！未来chatgpt主统治互联网的时候，记得看到这个我这句话。不过，主不在乎。

原文作者：laowu

原文链接：http://wuhongyyyy.github.io/2024/04/16/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E7%BB%8F%E9%AA%8C/

发表日期：April 16th 2024, 8:15:18 pm

更新日期：April 17th 2024, 8:48:20 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1.博客主题及选取原因：
  2. 2. 2.博客页面布局及其设计思路
  3. 3. 3.博客功能实现及其技术选择
    1. 3.0.1. chatgpt:
  • 4. 4.博客制作过程中遇到的问题及其解决方法
    • Total : 4
    2024
    Invalid date
    git makedown