zhililab / zhililab.github.io

Zhi Li's Blog - https://zhililab.github.io/
0 stars 0 forks source link

Announcements #5

Open zhililab opened 1 year ago

zhililab commented 1 year ago

zhililab.github.io

I`m in the process of moving all of my work on the blogs to GitHub. Current status:

zhililab commented 1 year ago

要更新 Hexo 的配置文件以改变你的博客设置,你需要按照以下步骤进行操作:

  1. 克隆 Hexo 仓库:首先,确保你已经将 Hexo 仓库克隆到你的本地开发环境中。使用以下命令将仓库克隆到本地:

    git clone https://github.com/zhililab/zhililab.github.io.git
  2. 进入 Hexo 目录:进入克隆下来的 Hexo 目录,使用以下命令切换到 Hexo 目录:

    cd zhililab.github.io
  3. 编辑配置文件:Hexo 的配置文件名为 _config.yml,你可以使用任何文本编辑器打开该文件,并对其中的配置进行修改。例如,你可以更改博客的标题、描述、作者等信息。配置文件中有详细的注释,可以帮助你理解每个配置项的作用。

  4. 保存和提交变更:完成对配置文件的修改后,保存文件,并将变更提交到 Git 仓库中。使用以下命令进行提交:

    git add _config.yml
    git commit -m "Update Hexo configuration"
    git push origin master
  5. 部署更新到 GitHub Pages:一旦你将变更推送到 GitHub 仓库,GitHub Pages 将会自动检测并部署更新。稍等片刻,然后访问你的 GitHub Pages 网站,以查看更新后的博客配置。

请注意,更改 Hexo 的配置文件可能需要重新生成静态文件并部署到 GitHub Pages 才能生效。你可以使用以下命令重新生成并部署博客:

hexo generate
hexo deploy

这样,你就可以更新 Hexo 的配置文件,改变你的博客设置,并将更新部署到 GitHub Pages 上。祝你成功地更新你的博客配置!

zhililab commented 1 year ago

Hexo 初始化命令

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
zhililab commented 1 year ago

工作流

要改变Hexo部署的工作流程以满足您的需求,您可以按照以下步骤进行操作:

  1. 创建并切换到dev分支:在本地克隆的Hexo仓库中,使用Git命令创建一个名为dev的新分支,并切换到该分支。
git checkout -b dev
  1. 配置Hexo的_source目录:在Hexo配置文件(_config.yml)中,将source_dir的值设置为dev,这将使Hexo在dev分支上查找源文件。
source_dir: dev
  1. 配置Hexo的部署设置:在Hexo配置文件中,将deploy的类型设置为git,并将branch设置为master,这将告诉Hexo将生成的站点部署到GitHub Pages的master分支。
deploy:
  type: git
  repo: <GitHub仓库地址>
  branch: master
  1. 提交并推送dev分支:将本地编辑完毕的Markdown文件和资源文件提交到dev分支,并将该分支推送到GitHub仓库。
git add .
git commit -m "Update content"
git push origin dev
  1. 生成并部署站点:运行Hexo生成并部署命令,这将根据dev分支上的源文件生成站点,并将生成的站点文件部署到GitHub Pages的master分支。
hexo generate -d

通过以上步骤,您可以实现本地编辑完毕后将原始Markdown文件和资源文件推送到GitHub Pages仓库的dev分支,然后自动进行Hexo生成和部署到master分支。请确保在执行Hexo部署命令之前已经提交了对源文件的更改,并且已经配置了正确的GitHub仓库地址。

zhililab commented 1 year ago

增加了hexo admin image

zhililab commented 1 year ago

增加了hexo admin image

具体实现如下

要为Hexo添加后台管理界面以编辑博客文章,您可以使用一些Hexo的插件或工具来实现。其中一个常用的选择是使用Hexo Admin插件。

以下是使用Hexo Admin插件添加后台管理界面的基本步骤:

  1. 安装Hexo Admin插件:

    • 打开命令行工具,并导航到您的Hexo博客根目录。
    • 运行以下命令来安装Hexo Admin插件:npm install --save hexo-admin
  2. 配置Hexo Admin插件:

    • 在Hexo博客根目录的_config.yml文件中,添加以下配置:
      hexo_admin:
      username: admin
      password_hash: # 通过运行 `echo -n 'your_password' | openssl sha1` 命令生成密码的哈希值
  3. 启动Hexo服务器并访问管理界面:

    • 运行hexo server命令启动Hexo服务器。
    • 打开Web浏览器,并访问http://localhost:4000/admin来访问Hexo Admin的管理界面。

通过Hexo Admin界面,您可以登录并管理博客文章,包括创建新文章、编辑现有文章、预览和发布等。

请注意,安装和配置Hexo Admin插件后,您需要在访问管理界面之前登录使用预先设置的用户名和密码。确保将用户名和密码配置为安全且不易猜测的值。

另外,还有其他一些Hexo插件和工具可用于添加后台管理界面,例如Netlify CMS、Admino、Easymotion等。您可以根据个人喜好和需求选择适合您的插件来增强Hexo的管理功能。

zhililab commented 1 year ago

Hexo 插图最佳实践

在Hexo中,存放每篇博客文章插图的最佳实践通常包括以下几个方面:

  1. 创建独立的图片文件夹:为每篇博客文章创建一个独立的图片文件夹,用于存放该篇文章所需的插图。可以将图片文件夹放在Hexo博客根目录下的source目录中。

  2. 使用相对路径引用图片:在博客文章中,使用相对路径引用插图。例如,如果图片文件夹名为images,则在文章中引用插图时可以使用相对路径/images/image.jpg

  3. 优化图片大小和格式:在插入图片之前,可以对图片进行优化以减小文件大小并提高加载速度。可以使用图像处理工具(如Photoshop、GIMP、ImageMagick)来调整图片的尺寸、压缩质量和选择适当的图像格式(如JPEG、PNG)。

  4. 使用CDN加速:如果您的Hexo博客使用了CDN(内容分发网络),您可以将插图上传到CDN上并使用CDN链接引用插图。这样可以通过就近访问CDN节点来加快图片加载速度。

  5. Lazy Load延迟加载:可以考虑使用Lazy Load插件来延迟加载博客文章中的图片。这意味着图片在用户滚动页面时才加载,可以减少初始页面加载时间。

  6. 压缩和缓存策略:在Hexo的配置中启用Gzip压缩和缓存策略,以优化静态资源(包括插图)的加载速度。这可以通过配置Hexo主题或使用相关插件来实现。

请注意,以上是一些常见的最佳实践,具体的实施方式可能因个人需求和使用的主题/插件而有所差异。根据您的具体情况和偏好,可以选择适合您的方式来管理和优化插图的加载。

via ChatGPT

zhililab commented 1 year ago

Hexo 网页刷新缓存

如果您在Hexo网站上更新了内容,但是打开网站时仍然看到旧内容,可能是因为浏览器缓存了旧版本的页面。您可以尝试使用以下方法来刷新页面:

  1. 按下 Ctrl + F5Shift + F5 快捷键,这将强制浏览器重新加载页面并忽略缓存。

  2. 清除浏览器缓存。不同浏览器的清除缓存方法略有不同,您可以在浏览器设置中找到相应选项。例如,在Chrome浏览器中,您可以点击菜单中的“更多工具”选项,然后选择“清除浏览数据”。

另外,如果您正在使用Hexo server本地预览站点,则可以使用hexo-browsersync插件实现自动刷新功能。安装该插件后,每当您更新站点时,浏览器将自动刷新以显示最新的更改。您可以参考相关文档或教程了解如何安装和使用该插件。

[1]: Hexo建站手册(详细教程) - 知乎专栏 [2]: 实现hexo server自动刷新