Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Announcements #5

Open
zhililab opened this issue May 27, 2023 · 7 comments
Open

Announcements #5

zhililab opened this issue May 27, 2023 · 7 comments
Assignees
Labels
good first issue Good for newcomers

Comments

@zhililab
Copy link
Owner

zhililab commented May 27, 2023

zhililab.github.io

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

  • Code: Now, all code is migrated into github pages repo(https://github.com/zhililab/zhililab.github.io)

  • Build System: hexo build

  • Tests:

  • Continuous Integration: NA

  • Contribution Guidelines: NA

  • Issues: In progress.

  • Plans: ① support online management(edit, delete) ② performance

@zhililab zhililab pinned this issue May 27, 2023
@zhililab zhililab changed the title My Blogs 我的博客 May 27, 2023
@zhililab
Copy link
Owner Author

要更新 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
Copy link
Owner Author

zhililab commented May 27, 2023

Hexo 初始化命令

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

@zhililab
Copy link
Owner Author

工作流

要改变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 zhililab transferred this issue from zhililab/Znotes May 28, 2023
@zhililab zhililab self-assigned this May 28, 2023
@zhililab zhililab changed the title 我的博客 Announcements May 28, 2023
@zhililab zhililab pinned this issue May 28, 2023
@zhililab
Copy link
Owner Author

增加了hexo admin
image

@zhililab
Copy link
Owner Author

增加了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 zhililab added the good first issue Good for newcomers label May 28, 2023
@zhililab
Copy link
Owner Author

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
Copy link
Owner Author

Hexo 网页刷新缓存

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

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

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

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

[1]: Hexo建站手册(详细教程) - 知乎专栏
[2]: 实现hexo server自动刷新
[3]: Hexo页面自动刷新与移动端调试

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant