当前位置:   article > 正文

用Hexo在github上部署个人博客

用Hexo在github上部署个人博客

        要去建网站了,心情澎湃,立马上手,虽然修过网页设计的课,但和建站还是差了好多,我这个web小白先看视频,了解建网站的基本知识。然后跟了视频和保姆级别的博客,目前到换主题时一直调试。入门对框架的还不是很了解,于是得总结框架。


一、简介

        小白开始瞎bb了。/。/。/。/。

        博客是允许公网访问的web,一般用于展示,而本文所选的hexo属于静态web,相对于动态网站,是指没有后台数据库、不含程序和不可交互的网页。关于博客框架选择,B站上有他的视频,更详细。概括如图前两个都是没有后端,加载快,有后端的则可随时随地的写博客。

  个人博客搭建框架优缺点

       前端即网站前台部分,指运行在PC端、移动端浏览器上展现给用户浏览的网页。HTML超文本标记,前端必备,程序开发也常用,写博客还得用它的格式写,即Markdown快速入门。CCS(Cascading Style Sheets)层叠样式表是一种用来表现HTML或XML等文件式的计算机语言,不仅仅可以静态的修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。前端HTML是内容,那CCS则是形式;HTML构建网站的基本框架,CCS则美化框架,javascript产生交互作用,如鼠标点击、移动、键盘输入后的动作反应等。关于后端不仅java,还有php、python、GO、C等。建立网站需要服务器,域名,网页代码。服务器可以是你的电脑、可以是超算服务器,甚至可以是你的旧手机。俺们这里的服务器载体是github仓库,由超级计算机组成服务器,在这个平台的管理下,获得免费的有限空间和权限的服务器。

        Node.js是运行在服务端的JavaScript,是一个基于Chrome V8引擎的JavaScript运行环境,换句话说,Node.js是一款工具,是一个基于Chrome V8 引擎的在服务端运行JavaScript代码的工具。它使得javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。>> Node.js基本知识<<。它在blog建站中very important!!!,更新博客得用它,据说nodejs比较适合小网站,博客类网站,适合新手快速上手。还有和nodejs一起的NPM,Node Package Manager即node包管理器,下载一些网页前端扩展性的小程序或脚本得用它,使用场景:

  • 允许用户从NPM服务器下载他人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装他人编写的命令行程序到本地使用。
  • 允许用户自己编写的包或命令行程序上传到NPM服务器供他人使用。

        git也很重要,博客网页的配置文件修改可用vscode,其他操作在git的bash窗口上了,也可以在win的powershell或者在vscode的终端terminal上进行操作。同时用它里面自动下载的openssh来远程连接服务端,下载代码(程序脚本等)。git是控制系统,源起于linux内核开源项目的分布式版本控制系统BitKeeper,02年到05年,然后BitKeeper商业化了,于是linux缔造者Torvalds基于BitKeeper开发出自己的版本系统,最初的目标:

  • 速度
  • 简单的设计
  • 对非线性开发模式的强力支持(允许成千上万个并行开发的分支)
  • 完全分布式
  • 有能力高效管理类似Linux内核一样的超大规模项目(速度和数据量)

对于现在的git,想去了解的快去菜鸟教程吧。

二、操作步骤

1. 条件准备,下载和安装配置

  1. 下载安装vscode,参考视频即可。
  2. nodejs下载安装
  3. git下载安装
  4. chrome浏览器,默认都有

        这些windows软件环境的准备,按照其它教程,我是跟b站上视频,稳妥的就一路按照默认的选项确定next即可。我在git安装时砍掉一些选项,比如菜单栏,桌面快捷键等等,觉得这种和linux类似的窗口还是纯手动较好,还有这个openssh,之前在采用vscode上的插件实行远程控制也安装过,思前想后俺也不知道在哪配置,还是按照git上自己搭载openssh。稳妥的一路按照默认选项安装,会有那么一点让电脑很臃肿的感觉。

        具体建议去跟B站视频。

        具体建议去跟菜鸟教程

2. 过程回顾

① 安装hexo,检验是否安装成功

② 注册github账号,建立GitHub仓库,即我们建立博客网站的服务器。

③ 生成ssh密钥:用git自带的openssh,所以打开bash窗口,有右键菜单栏随便找个文件下,空白处右键打开git,没有去找,有everything直接搜bash,没有的手动找"安装目录\Git\bin\bash.exe"。运行密钥生成命令:ssh-keygen -t rsa -C "github注册邮箱",找‪到文件C:\Users\Administrator\.ssh\id_rsa.pub。用记事本打开,复制粘贴到github的密钥生成框中,绑定。

④ 生成本地博客网页,要用到gitbash,需要在你所建立的bolg文件夹下启动,或者在安装目录中启动,然后cd 到你的bolg文件夹下。hexo初始化后,模板网页框架会下载到你的blog文件夹,也是gitbash运行的文件夹。

  1. # 在win32命令窗口中验证nodejs和git是否安装成功
  2. # win+R ———> cmd
  3. node -v
  4. git -v
  5. npm -v
  6. #------------------以下在gitbash上输入---------------------
  7. # ⒈通过nodejs的npm安装hexo,并检验
  8. npm install hexo-cli -g
  9. hexo -v
  10. # ⒊密钥生成
  11. ssh-keygen -t rsa -C "github注册邮箱"
  12. # ⒋生成本地静态网页,“xx/xx/myblog” 均为自命名的文件夹
  13. cd /f/xx/xx/myblog
  14. hexo g
  15. # 启动网页服务,生成一个地址,复制到chrome访问
  16. hexo s

⑤ 发布到网上,首先配置_config.yml文件,然后在blog文件下运行gitbash,安装hexo-deployer-git。注意这个是属于前端网页配备的脚本,目前它是在node_modules文件夹里面。所以每当你新开一个blog文件夹并init后,都需要重新下载,不然无法deploy。还有,第一次deploy也就是你的电脑向你的gihub服务端上传数据,需要输入用户名和密码,后来更新了,不可用密码登入,需要一个token,所以还得去gihub上打开token,视频有详细介绍,可以复制了。

  1. # 配置_congfig.yml文件
  2. # Deployment
  3. ## Docs: https://hexo.io/docs/one-command-deployment
  4. deploy:
  5. type: 'git'
  6. repository: https://github.com/aabbccdd/aabbccdd.github.io.git
  7. branch: main
  8. # 下载上传插件
  9. npm install hexo-deployer-git --save
  10. # 然后
  11. hexo g
  12. hexo d

        最后,我们可以在浏览器上访问这个“网站”了,手机上也ok,激动qwq!接下来就是踩坑第一站,hexo-theme-matery主题更换。


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/906978
推荐阅读
相关标签
  

闽ICP备14008679号