保姆级教学 基于Hexo搭建个人网站（Github）

忿忿的泥巴坨  金牌会员 | 2024-11-24 08:30:06 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 991|帖子 991|积分 2973

搭建Hexo静态博客

先容

老久没更新了 做这一篇博客的初志也是想曝光我的网站 下面是地址 接待大家赏脸访问（可能比力卡）
访问我的网站
https://waitayaka.github.io



  • 然后网站内里也有很多这里没有的文章 大家也可以去看一看

一、注册Github账号

视频教程点击我
二、 安装前置软件包



  • Git https://git-scm.com/download/win
  • VSCode https://code.visualstudio.com/
  • Typora
  • Node.JS https://nodejs.org/en
三、 绑定github仓库

创建SSH私钥



  • 打开Git Bash输入
  1. git config --global user.name "你的Github用户名"
  2. git config --global user.email "你的邮箱"
复制代码


  • 创建SSH私钥
  1. $ ssh-keygen -t rsa -C "2187988995@qq.com"  ## 输入自己的邮箱
  2. Generating public/private rsa key pair. //以下选项都回车 什么都不用输入
  3. Enter file in which to save the key (/c/Users/21879/.ssh/id_rsa):
  4. Enter passphrase (empty for no passphrase):
  5. Enter same passphrase again:
  6. Your identification has been saved in /c/Users/21879/.ssh/id_rsa
  7. Your public key has been saved in /c/Users/21879/.ssh/id_rsa.pub
  8. The key fingerprint is:
  9. SHA256:i++Oohyq3eWhzqArA4Z0WuEVD2qUwBz8+gB40JG6zPA 2187988995@qq.com
  10. The key's randomart image is:
  11. +---[RSA 3072]----+
  12. |++++.o.          |
  13. |.++o..o          |
  14. |.oooo  .         |
  15. |=.o=             |
  16. |B+=     S        |
  17. |+BE    . .       |
  18. |o =   + .        |
  19. |o= *.+ +         |
  20. |Bo+o=.oo+        |
  21. +----[SHA256]-----+
复制代码


  • 查看生存ssh密钥的文件夹 一般都在C:\Users\你的用户\.ssh

添加私钥






毗连Github仓库


  • 在.ssh文件夹下创建config文件


  • 在config文件中添加以下内容
  1. Host github.com
  2. HostName ssh.github.com  # 这是最重要的部分
  3. User git
  4. Port 443
  5. PreferredAuthentications publickey
  6. IdentityFile ~/.ssh/id_rsa
复制代码

  • 测试毗连ssh库
  1. $ ssh git@github.com
  4. The authenticity of host '[ssh.github.com]:443 ([20.205.243.160]:443)' can't be established.
  5. ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
  6. This key is not known by any other names.
  7. Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
  8. Warning: Permanently added '[ssh.github.com]:443' (ED25519) to the list of known hosts.
  9. PTY allocation request failed on channel 0
  10. Hi WaitAyaka! You've successfully authenticated, but GitHub does not provide shell access.
  11. Connection to ssh.github.com closed.  //显示 HI `你的用户名`！即为连接成功
复制代码
四、安装hexo

1. 更改npm镜像源

  1. `进入cmd`
  2. npm config set registry https://registry.npmmirror.com
复制代码
2. 创建一个文件夹 在内里打开终端



  • 使用npm安装hexo
  1. npm install -g hexo-cli
复制代码
3. 初始化hexo

  1. hexo init
  2. `初始化完成 后显示`
  3. INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
  4. INFO  Install dependencies
  5. INFO  Start blogging with Hexo!
复制代码

  • 运行博客
  1. hexo g //生成更改内容
  2. hexo s
  4. //运行本地网页服务
复制代码



  1. D:\My Blogs>hexo s
  4. INFO  Validating config
  5. INFO  Start processing
  6. INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
复制代码

可以使用本身喜欢的主题 可以在网上自行搜索
这里使用particleX 因为很好看


  • 主题官方文档
https://github.com/theme-particlex/hexo-theme-particlex
五、切换主题

1. 安装主题

  1. cd themes
  2. git clone git@github.com:theme-particlex/hexo-theme-particlex.git particlex --depth=1
复制代码
2. 修改默认主题


  • 在根目录 _config.yml 设置主题为 ParticleX 即可


查看修改主题后的网站

  1. hexo s
复制代码

六、主题美化

1. 修改主题标签

还是_config.yaml文件 任意修改以下参数 修改完后记得ctrl+s生存配置

重新启动hexo服务
  1. hexo s
复制代码

2. menu 主页菜单导航

必要我们进入到主题的_config.yaml进行配置


  • 进入之后找到menu选项

我们可以更改Home About这些的定义 比如将Home 换成主页 About 换成关于

查看修改后结果


  1. menu:
  2.     主页:
  3.         name: house
  4.         theme: solid
  5.         link: /
  6. # 关于页面链接：
  7.     关于:
  8.         name: id-card
  9.         theme: solid
  10.         link: /about
  11. # 存档页面链接
  12.     存档:
  13.         name: box-archive
  14.         theme: solid
  15.         link: /archives
  16. # 分类页面链接
  17.     分类:
  18.         name: bookmark
  19.         theme: solid
  20.         link: /categories
  21. # 标签页面链接
  22.     标签:
  23.         name: tags
  24.         theme: solid
  25.         link: /tags
复制代码
七、Hexo常用命令

  1. hexo clean //清除hexo缓存hexo g     //重新生成hexohexo s
  3.      //运行本地服务器hexo d     //将hexo推送到设置好的服务器上hexo new   xxx //新建博文hexo new page xxx //新建页面
复制代码
博文新建好会存到/<博客根目录>/souce/_post中
采取MarkDown语法
1. 创建新页面

  1. D:\My Blogs\themes>hexo new page "about"
  2. INFO  Validating config
  3. INFO  Created: D:\My Blogs\source\about\index.md
复制代码


  • 进入Created: D:\My Blogs\source\about\index.md



  • 访问关于页面

2. 创建博文

  1. D:\My Blogs\themes>hexo new "你好Hexo"
  2. INFO  Validating config
  3. INFO  Created: D:\My Blogs\source\_posts\你好Hexo.md
复制代码
进入 D:\My Blogs\source\_posts\你好Hexo.md



八、推送hexo到github.io上

1. 修改本地博客配置文件

在本地博客中找到_config.yaml找到deploy部分

  1. repo: 后面接上你的github仓库地址
复制代码
2. 下载插件

  1. npm install hexo-deployer-git --save
复制代码


  • 在命令行中输入
  1. hexo clean //清除缓存
  2. hexo g //生成更改
  3. hexo d //推送到服务器
复制代码



  • 上传的过程
  1. D:\My Blogs\themes>hexo d
  2. INFO  Validating config
  3. INFO  Deploying: git
  4. INFO  Setting up Git deployment...
  5. Initialized empty Git repository in D:/My Blogs/.deploy_git/.git/
  6. [master (root-commit) 7798c74] First commit
  7. 1 file changed, 0 insertions(+), 0 deletions(-)
  8. create mode 100644 placeholder
  9. INFO  Clearing .deploy_git folder...
  10. INFO  Copying files from public folder...
  11. INFO  Copying files from extend dirs...
  12. warning: in the working copy of '2024/04/13/hello-world/index.html', LF will be replaced by CRLF the next time Git touches it
  13. warning: in the working copy of '2024/04/13/浣犲ソHexo/index.html', LF will be replaced by CRLF the next time Git touches it
  14. warning: in the working copy of 'about/index.html', LF will be replaced by CRLF the next time Git touches it
  15. warning: in the working copy of 'archives/2024/04/index.html', LF will be replaced by CRLF the next time Git touches it
  16. warning: in the working copy of 'archives/2024/index.html', LF will be replaced by CRLF the next time Git touches it
  17. warning: in the working copy of 'archives/index.html', LF will be replaced by CRLF the next time Git touches it
  18. warning: in the working copy of 'css/main.css', LF will be replaced by CRLF the next time Git touches it
  19. warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
  20. warning: in the working copy of 'js/lib/crypto.js', LF will be replaced by CRLF the next time Git touches it
  21. warning: in the working copy of 'js/lib/highlight.js', LF will be replaced by CRLF the next time Git touches it
  22. warning: in the working copy of 'js/lib/home.js', LF will be replaced by CRLF the next time Git touches it
  23. warning: in the working copy of 'js/lib/math.js', LF will be replaced by CRLF the next time Git touches it
  24. warning: in the working copy of 'js/lib/preview.js', LF will be replaced by CRLF the next time Git touches it
  25. warning: in the working copy of 'js/lib/search.js', LF will be replaced by CRLF the next time Git touches it
  26. warning: in the working copy of 'js/main.js', LF will be replaced by CRLF the next time Git touches it
  27. [master fd9219c] Site updated: 2024-04-13 22:12:36
  28. 19 files changed, 2778 insertions(+)
  29. create mode 100644 2024/04/13/hello-world/index.html
  30. create mode 100644 "2024/04/13/\344\275\240\345\245\275Hexo/index.html"
  31. create mode 100644 about/index.html
  32. create mode 100644 archives/2024/04/index.html
  33. create mode 100644 archives/2024/index.html
  34. create mode 100644 archives/index.html
  35. create mode 100644 css/main.css
  36. create mode 100644 images/avatar.jpg
  37. create mode 100644 images/background.jpg
  38. create mode 100644 images/loading.gif
  39. create mode 100644 index.html
  40. create mode 100644 js/lib/crypto.js
  41. create mode 100644 js/lib/highlight.js
  42. create mode 100644 js/lib/home.js
  43. create mode 100644 js/lib/math.js
  44. create mode 100644 js/lib/preview.js
  45. create mode 100644 js/lib/search.js
  46. create mode 100644 js/main.js
  47. delete mode 100644 placeholder
  48. info: please complete authentication in your browser...
  49. Enumerating objects: 34, done.
  50. Counting objects: 100% (34/34), done.
  51. Delta compression using up to 16 threads
  52. Compressing objects: 100% (25/25), done.
  53. Writing objects: 100% (34/34), 1.81 MiB | 906.00 KiB/s, done.
  54. Total 34 (delta 4), reused 0 (delta 0), pack-reused 0 (from 0)
  55. remote: Resolving deltas: 100% (4/4), done.
  56. To https://github.com/WaitAyaka/Ayaka.github.io.git
  57. * [new branch]      HEAD -> main
  58. branch 'master' set up to track 'https://github.com/WaitAyaka/Ayaka.github.io.git/main'.
  59. INFO  Deploy done: git
复制代码
推送到互联网




  • 选择main 并生存


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

忿忿的泥巴坨

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表