Twilight6 发表于 2023-5-21 02:29:04

【个人博客搭建】Hexo + Github + Netlify 静态个人博客搭建(无需购买服务器)

本帖最后由 Twilight6 于 2023-5-21 16:48 编辑


Hexo 个人静态博客搭建教程
                                    ——无需购买服务器
https://fishc.com.cn/static/image/hrline/1.gifhttps://fishc.com.cn/static/image/hrline/1.gif





0. 前言


    搭建过程中遇到的问题可以在评论区留言,或者到博客留言板中向楼主留言嗷~    楼主博客地址(第一次访问可能较慢,请耐心等待嗷):UangSC's Blog (uangsc.netlify.app)     另外欢迎各位搭建成功或已经有博客的小伙伴互相添加友链~(虽然还没购买域名,但是也不碍事~)

    帖子中包含截图数140+,文字描述8000+,共花费数十小时(过程中许多配置自己都忘记了,重温一遍...)    教程中精细到搭建过程的每一步,希望感兴趣的鱼友能无成本的搭建一个属于自己的博客,搭建后的这个博    客就是你的专属的“笔记本”或“日记本”,用来存放学习笔记、记录日常的趣事与分享学习的心得等!
          
    1. 本贴花费了楼主大量的精力,所以不希望有太多水贴的评论,就不设置鱼币回复奖励了
    2. 楼主也是五月月初才进行了学习和搭建,所以教程中可能有些不足,希望各位鱼友见谅
    3. 鱼友们可以直接去官网: Hexo 官方文档 和 Butterfly 主题官方文档 进行更加详细配置
    4. Hexo 主要是将 markdown 解析为 html 文件,所以需要了解些 markdown 的语法规则


    温馨提醒:博客搭建需要有耐心哦,本贴所有内容都没有设置回复可见,所以楼主希望看到              的评论是鱼友们搭建好的博客网址又或者是博客搭建过程中遇到的疑问与问题,              不需要大家的评分,能看到鱼友成功分享搭建后的博客,就是对我最大的支持!



Ⅰ. 准备工作

    1. 感慨与自省
           教程文章的开始,想说些什么,但又不知该说些什么。思来想去,还是想和大家杂谈一些无关内容,       想快速学习搭建的直接滑动页面,从【2. 准备工作】开始进行阅读,感谢各位鱼友的理解与支持!另外希       望真正想搭建博客的小伙伴,确保充足的时间,一次性搭建成功!碎片化时间不适合尝试搭建,会使得搭       建效率大大下降哦。
       >>> 只要不是天马行空,别只想,勇于直接做!           楼主在很早以前就想搭建一个属于自己的个人博客,但是始终只停留在想像层面,直到如今才肯付出实践。在这段尝试着学        习与搭建博客的过程中,学到了很多,也反思了很多。因为在搭建博客过程中,看了许多原创的配置、美化教程,都是与楼主差        不多同龄的博主们分享的。看着他们搭建了两三年的博客中丰富的内容,对比自己在大学生涯中的荒废度过而感到羞愧与自责。        倘若......唉,算了。可惜世上没有后悔药,我们只能把握当下所以论坛中的鱼友们,别太过贪玩,有合适的想法就去实现,切勿        “明日复明日”,这是半个过来人小小的忠告。



    2. 准备工作

       2.1 安装 Node.js 与 Git           因为 Hexo 是基于 Node.js 来实现的静态博客框架。它依赖于 Node.js 环境运行,在初始化与安装 Hexo 博客框架与其插
        件时都离不开 Node.js。而 Git 是分布式版本控制系统,便于我们管理和跟踪博客代码的变化。在安装 Hexo 博客主题时,也离
        不开远程 Git 拉取第三方代码到本地。最重要的是,Hexo 编译生成的静态页面可以通过 Git 来部署到自己的仓库,配合静态服
        务器平台的网站部署与托管,实现本地提交并 Push 到仓库,服务器平台实时监测到仓库更新,自动 Pull 后重新构建静态页面,
        并且自动部署到静态服务器上。

       2.2 搭建过程中需要使用到的工具
           本文中使用 GitHub 来作为博客仓库,使用 Netlify 来进行构建与静态页面的部署。鱼友们也可以使用 GitLab 等托管平台,
        进行博客代码的托管;使用 GitHub Pages (不推荐,经常无法访问)等平台来进行页面的构建。为了避免过程中出现的许多不
        确定因素,新手鱼友们还是和楼主使用一样的工具吧!           另外,这里也建议使用 Vs Code 当作过程中的代码与配置的编写工具。

       2.3 准备验证邮箱与可接收验证码的手机号
           因为各平台账户注册途中,可能需要邮箱或手机号来绑定并接收验证码。因为论坛中有许多年轻的鱼友,要记住请在父母的同意
        下进行操作哦。

       2.4 准备好合适上网工具
           因为教程中有许多境外网站(例如 GitHub、Netlify),因为服务器在遥远的大洋彼岸,过程中可能需要进行部分配置或科学上
        网才能有更快的访问速度。鱼友们可以尝试访问 GitHub 与 Netlify 试着看看自己是否需要工具进行辅助访问。
           若无法正常访问以上网站,建议使用 FastGitHub 工具进行访问。工具使用简单,只需打开程序即可自动在后台配置合适的 DNS
        IP来进行访问。请鱼友们在下载并打开后,重新进行网站的访问,若可以正常访问,那么准备工作差不多到此结束!



    3. 账户的注册

       3.1 GitHub 账户注册查看此篇帖子:GitHub 账户注册与基础使用 只需操作至【I.账号注册】即可
       3.2 Netlify 账户可直接使用 GitHub 进行登入
       3.3 基础搭建只需要这两个账户即可,但若使用某些插件需要使用某些服务接口,也需要再次注册账户


    4. 下载安装包
       Node.js (nodejs.org) 与 Git (git-scm.com) 蓝奏云下载地址:安装包.zip - 蓝奏云 (lanzouf.com)
       FastGitHub 蓝奏云下载地址:FastGitHub_Win-x64.zip - 蓝奏云(lanzouf.com)
       开始教程前,建议先将 FastGitHub 开启,以便有着较为合适的网络速度访问教程中相关官网

               






Ⅱ. Node.js与Git的安装与配置


    1. Node.js 安装与配置
        1.1 解压 zip 后双击打开 Node.js 安装包 node-v18.16.0-x64.msi
               

        1.2 勾选同意,继续 Next
               

        1.3 配置好 Node.js 安装路径,继续 Next (这里可以将路径拷贝,等下配置环境变量需要使用)
               

        1.4 直接无脑 Next
               

        1.5 这里请勿勾选,继续 Next
               

        1.6 安装成功,点击 Finish
               

        1.7 然后开始配置环境变量,同时按下 Win + R 在弹出的运行窗口输入 sysdm.cpl 回车,打开系统属性窗口,点击高级 -> 环境变量
               

        1.8 在弹出的环境变量窗口下方系统变量中找到 Path,选择编辑
               

        1.9 查看 Path 中是否配置以下路径(注意这里的路径是步骤 1.3 时配置的安装路径,Node.js 安装路径应该是默认会配置上的,最底下那一个 \node_global 路径需要手动添加)                        

        1.10 回到安装目录下,新建 node_cache 与 node_global 文件夹
               

        1.11 打开命令行,先后输入 node -v 与 npm -v 回车,若正常显示版本号则安装成功
               

        1.12 配置淘宝镜像,npm下载时速度快些。在命令行运行图中三段命令,无报错,则配置成功。最后调用 npm config ls 查看配置情况(记得更换为你自己的 Node.js 路径)
npm config set prefix "你的Node.js路径\node_global"
npm config set cache "你的Node.js路径\node_cache"
npm config set registry https://registry.npm.taobao.org
               

        综上配置成功后即可进入下一步~


    2. Git 安装
        2.1 双击打开 Git 安装包,即解压后的 Git-2.40.1-64-bit.exe
               

        2.2 配置好安装路径,点击 Next
               

        2.3 选择组件,默认直接下一步
               

        2.4 选择 Git 默认编辑器               

        2.5 选择初始化分支默认分支名(2020年,Git 官方推荐以 main 为初始化分支名来替换 master,原因是 master 容易让人联想起奴隶制术语)
               

        2.6 添加 Git 到环境变量
               

        2.7 后续全部默认 Next,直到 Install 进行安装,Finish 后即可(下面图片可以忽略,Finish 后从 3.8 开始继续浏览即可)
               
               ------------------------- 手动图片分割线 ------------------------
               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               
               ------------------------- 手动图片分割线 ------------------------

               

        2.8 Finish 后回到桌面,右击即可看到 Git 打开程序
               

        2.9 打开终端或 Git Bash,输入 git --version , 将正常返回 Git 版本号信息则安装成功(终端打开必须配置好环境变量,即 3.6 步骤选择配置 Git 环境变量)
               

        2.10 必须设置用户签名,否则无法提交代码:打开终端或 Git Bash ,分别设置用户名: git config --global user.name 你的用户名 与用户邮箱: git config --global user.email 你的邮箱             虽然此处邮箱是虚拟的,但建议使用注册 GitHub 或 GitLab 等账户时用户名与邮箱。另外需要注意,此处属于本地仓库提交时所使用的签名,与后续 GitHub 登入账户无关            这里配置主要是为了提交代码时体现哪个用户进行的提交,用于记录提交信息。因为此信息是必备的,所以必须要进行配置,否则无法进行提交
               

    如此,初步工作已完成,接下来就步入正文!开始个人博客的搭建吧~



Ⅲ. Hexo博客的初始化

    1. 安装 Hexo 客户端
        1.1 在自己本机创建一个本地博客项目目录,用于存放博客项目,然后从博客文件夹下打开 cmd 终端,如图所示:
               

        1.2 打开终端后,输入 npm install hexo-cli -g 与回车,安装 hexo-cli 其中 -g 表示在全局环境下安装。安装成功如下图所示:
               

        1.3 如果你遇到了系统权限拒绝错误,那么就使用管理员运行终端即可
               

              或者一劳永逸去修改下 node.js 安装目录的控制权限,找到 node.js 的安装目录,右击选择属性
               

              点击安全,然后找到你此时的用户组,点击编辑
               

              将完全控制权限设置为允许,点击应用或者确定即可,设置完毕后,注意一定要重新打开终端才能生效
               


    2. 初始化 Hexo 博客
        2.1 在命令行输入 hexo init 成功初始化后如下图所示:
               

           如遇网络问题,重启 FastGitHub 再次进行尝试,若遇到 ERROR Cannot find module 'hexo' 错误
                https://xxx.ilovefishc.com/forum/202305/21/124528m40qzssqgg12kjrj.png                                                        图片来源:@歌者文明清理员
           则执行 npm install --force 重新安装所需模块,安装成功后再次执行 hexo init 问题即可解决

        2.2 成功初始化后的目录结构如下图所示:
               

            这里需要注意以下文件夹:                - source:静态资源存放目录(包含自定义页面与用户自己写入的 css、js、img 等静态资源)                  - _posts:主要存放博客中的文章                - themes:Hexo 主题文件,会根据主题来生成静态页面,自定义美化时经常需要改动里面的文件                - scaffolds:用于存放已经定义好的模板文件夹            想了解更加详细目录说明的内容,可以访问此处:官方 Hexo 项目目录结构说明文档

        2.3 调用: hexo generate 或 hexo g 构建博客静态页面
               

        2.4 此命令会构建博客静态页面,保存在博客根目录下的 public 目录中,且会生成一个存放元数据的 db.json 文件,如下图所示:
               

        2.5 成功构建页面后,调用: hexo server 或 hexo s 即可启动本地服务器
               

        2.6 打开浏览器访问: localhost:4000 或 127.0.0.1:4000 即可访问到构建后的博客页面,如图所示
               







Ⅳ. Hexo博客主题配置(本文使用Butterfly主题)

    1. 下载 Butterfly 主题
        1.1 在博客根目录下打开终端,输入 Git 命令将远程主题克隆到本地: git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
               
               ----------------------------------- 手动图片分割线 ------------------------------

               

        1.2 安装 stylus 模板解析器,否则打开页面会无法解析 .pug 模板。同样在博客根目录下打开终端并输入命令: npm install hexo-renderer-pug hexo-renderer-stylus --save
               

        1.3 在博客根目录下打开配置文件 _config.yml 找到约 100 行处的 theme: landscape 修改为 theme: butterfly 保存文件即可        需要注意 _config.yml 是根目录下的,而不是主题目录 theme/butterfly/_config.yml 的配置文件,另外 yml 配置文件中,必须按照 yml 规范书写配置文件(例如缩进正确、冒号后必须要有一个空格)
               

        1.4 回到终端,输入命令: hexo g ; hexo s 表示按顺序执行 hexo generate 与 hexo server 必须要重新构建,否则配置无法生效
               

        1.5 Hexo Butterfly 主题初始化页面如下图所示:
               
    接下来,博客的美化我们先放在一旁,现在先尝试着将自己的博客项目提交到 GitHub 进行托管!



Ⅴ. 将 Hexo 博客上传至 GitHub

    1. 登入 GitHub 官网,创建一个新的仓库
        1.1 新账户可以直接点击左侧创建按钮,或者点击右侧 Your repositories 在弹出页面点击右上角 new
               
               -------------------------------- 手动图片分割线 -----------------------------
               
        1.2 设置仓库名,建议与本地项目名一致(楼主当时制作教程时忘记了这一点),另外仓库权限记得一定要设置为私有(楼主是教程项目所以无所谓,就设置为 Public )
               
               -------------------------------- 手动图片分割线 -----------------------------

               

        1.3 拷贝图中 git remote 行命令,等下需要将本地仓库与远程仓库进行关联,此命令会将本地配置文件中写入远程关联的仓库地址
               

    2. 准备初始化仓库

        2.1 回到博客目录,进入 themes/butterfly 主题文件夹下,将 .git 文件夹删除
               

        2.2 若在 themes/butterfly 文件夹下没有找到 .git 文件夹,那么说明你没开启隐藏文件可见,点击查看 -> 勾选隐藏的项目即可
               

               -------------------------------- 手动图片分割线 -----------------------------
               

        2.3 回到博客根目录,运行终端,开始准备初始化仓库
               


    3. 开始初始化仓库并提交代码
        3.1 在终端中输入 git init 进行初始化,如图所示,没有报错就行,回到博客根目录下查看
               

        3.2 此时在博客根目录下就可以看见 .git 文件夹,说明仓库初始化成功
               

        3.3 命令: git add . 会将博客根目录下所有的文件、文件夹(包括子文件与文件夹)添加入 Git 暂存区
               

        3.4 添加成功后,即可开始提交代码: git commit -m "此次提交的描述内容"
               

    4. 开始 Push 代码到远程仓库
        4.1 提交代码后,即可上传即 push 到远程仓库,但是本地初次提交前需要先配置关联的远程仓库,调用之前拷贝的代码 git remote
               

        4.2 在初次 push 代码,一般使用 -u 进行关联远程库与本地库,在后续的 push 中就不用携带 -u 命令,完整命令为: git push -u origin main           若第一次使用 Git Push GitHub 代码,则会弹出登入窗口,这里可以选择使用浏览器授权直接登入,即图中的第一个选项:
               
             图中出现 SECURITY WARNING 警告,如果你不想看到它,可以配置 Git 开启 TLS 证书验证:git config --global http.sslVerify true

        4.3 如果浏览器中此时 GitHub 中已经有账户登入,那么就会直接弹出授权页面,如下图所示,点击授权:
               

        4.4 授权需要进行密码验证,输入 GitHub 账户的登入密码即可
               

        4.5 授权成功页面
               

        4.6 此时回到终端,会发现文件正在 Push 或已 Push 完毕
               

        4.7 在回到我们的 GitHub 仓库上看看文件的 Push 情况
               
               -------------------------------- 手动图片分割线 -----------------------------
               

    至此上传至 GitHub 成功,接下来准备进行 Netlify 的部署






Ⅵ. 将 GitHub 中的 Hexo 博客部署到 Netlify
    1. 打开 Netlify 官网,登入并进行授权操作
        1.1 在点击右上角 Log in 选择 GitHub 账户进行登入
               

        1.2 然后再点击:Log in with GitHub 使用 GitHub 账户进行登入
               


        1.3 此时会弹出授权页面,点击授权
               



        1.4 此时出现授权成功页面,稍等片刻会自动跳转回 Netlify
               



        1.5 回到 Netlify 需要填写几个选择题目,随意填写即可,本文选择了: Personal -> blog -> HobbyDeveloper
               



        1.6 到最后部分,填写你的团队昵称或者个人昵称,这里写自己喜欢的昵称就行,然后点击继续
               



        1.7 开始部署你的第一个项目,点击 Deploy with GitHub 部署一个 GitHub 项目
               



        1.8 再次弹出授权页面,点击授权给 Netlify
               



        1.9 确认为 GitHub 仓库安装 Netlify ,这里我们选择指定仓库即可
               



        1.10 登入密码验证,输入 GitHub 账户的登入密码
               

    2. 开始进行 Netlify 相关部署工作
        2.1 创建好项目后,点击项目开始进行部署设置
               

               -------------------------------- 手动图片分割线 -----------------------------

               



        2.2 设置好项目的构建命令为: hexo generate 点击 Deploy Blog to Netlify 按钮开始部署(下方的 public 可以不用管,hexo 编译静态页面后恰好是存放在 public 文件夹中的)
               



        2.3 项目部署后,会自动开始调用配置好的构建命令,开始构建静态页面,并部署到静态服务器上
               



        2.4 部署成功,部署日志中没有明显报错,那么可以去部署好的页面查看内容
               



        2.5 将页面滚动到上方项目处,点击右侧 Permalink 即可浏览部署好的静态博客页面,默认是访问 public 文件夹下的 index 页面(在部署设置时的 public 就表示静态页面文件夹位置)
               



        2.6 恭喜你,打开后能正常访问就说明你已经成功部署了你的第一个博客!
               
    但是我们明显发现网址有些不太友好,因为项目的默认的项目名称比较长,而且此时访问的是以项目 ID 进行访问的    所以才导致如此长的网址,因此接下来我们设置自己独特的站点名称来实现简化博客的站点网址
    3. 进行 Netlify 站点相关配置
        3.1 回到项目页面,点击 Options 找到 Deploy Settings 进入项目的设置
               



        3.2 点击下方第一个:General,出现 Site details 点击它,进入站点详细描述设置
                图



        3.3 在此处可以更改项目的站点名称,这样就能使得网站为:站点名.netlify.app,简洁了许多
               

               -------------------------------- 手动图片分割线 -----------------------------
               


        3.4 然后我们尝试着直接访问:站点名.netlify.app 仍然可正常访问,说明配置成功!
               

    搭建成功后,切勿忘记在评论区中留下的你的博客网站哦~







Ⅶ.Hexo Buttterfly 主题的简单美化

    鱼友们可以去 Butterfly 官方文档进行更加详细的配置:Butterfly 安裝文档(一) 快速开始 | Butterfly

    另外本贴使用 Vs Code 编辑器进行代码的编写,没有接触过可以去官网下载:Visual Studio Code
    1. VsCode 初次配置

        1.1 打开 VsCode ,安装好中文插件,重启 VsCode
               
               -------------------------------- 手动图片分割线 -----------------------------
               
               -------------------------------- 手动图片分割线 -----------------------------
               


    2. 使用 VsCode 打开博客项目


        2.1 打开博客目录
               
               -------------------------------- 手动图片分割线 -----------------------------
               
               -------------------------------- 手动图片分割线 -----------------------------
               


    3. 配置文件的拷贝

        3.1 打将博客主题目录下的 _config.yml 文件拷贝到博客根目录


               
               -------------------------------- 手动图片分割线 -----------------------------
               
               -------------------------------- 手动图片分割线 -----------------------------
               
        3.2 然更改拷贝到根目录下的配置文件名为:_config.butterfly.yml
               


    4. 开始简单对博客进行美化

        4.1 打开 _config.butterfly.yml 配置文件,将 menu 下的注释解除,开启博客菜单栏,下面每一个选项表示一个菜单栏按钮,属性值为:菜单名:“文件夹相对路径” || 字符图标           例如:Tags:/tags/ || fas fa-tags 表示菜单栏中有一个名为 Tags 的选项,相对路径为 /tags/ ,字符图标为 fas fa-tags            此字符图标填写的是 Font Awesome 字符类名,Butterfly 支持 Font Awesome 官方免费版字符图标。想更改图标只要更改类名即可。
               

        4.2 找到 social ,开启社交圈图标
               

        4.3 给自己的博客首页配置一个好看的壁纸,找到 index_img 属性,填入本地图片地址或网络图片地址           可以使用 SM.MS (smms.app) 作为我们的图床,该图床每个用户有 5G 的存储空间
               

        4.4 本文演示不使用图床,可以在根目录下的 source 文件夹创建专门用来存放图片的文件夹
               
               -------------------------------- 手动图片分割线 -----------------------------
               


        4.5 修改 avatar 下的 img 路径,与 index_img 的背景图片路径,如图所示(如果使用图床,直接将图片链接拷上即可)           PS: 此处配置有些问题,楼主不小心使用了 \ ,而应该使用 / 作为路径分隔符,因为 \ 符号部署到服务器时会被转义导致在服务器中找不到资源              记得将分隔符更改过来哦,虽然在本地上看不影响,但部署到服务器就无法找到资源了
               

        4.6 然后我们来看看,配置了菜单栏、头像、首页横幅壁纸、社交图标后的博客吧,在 VsCode 打开终端,重新调用 hexo g 构建静态页面
               

        4.7 可以看到出现菜单栏,背景图片也同样配置好了,最后个人信息下的两个社交小图标也显示出来啦~           但是可以发现,网站中的标题栏都默认是英文的,所以接下来我们去更改下显示的语言
               

    5. 设置博客语言设置为中文

        5.1 打开博客根目录下的 _config.yml ,在根目录下找到 language: en 修改为 language: zh-CN 后保存文件,重新构建运行服务器即可           但这里需要注意是根目录下的 _config.yml ,而不是主题目录下的 _config.yml ,另外做任何修改时必须保存文件,才可生效           另外配置文件必须为英文冒号,且冒号后必须要有一个空格后才能追加属性值
               

        5.2 根据自己情况进行填写配置文件
               

        5.3 修改为中文后,且设置好了博客名称后的页面,这里发现菜单栏还未转为中文,是因为菜单栏是在主题文件中自己编写的,不归 language 属性管
               
               -------------------------------- 手动图片分割线 -----------------------------
               

        5.4 修改菜单栏后的效果图
               







Ⅷ. Hexo 新建页面与文章(楼主忘记了,补充 Hexo 内容)

    可以在博客根目录下运行终端,执行 hexo new post 文章名,新建文章
    同样在博客根目录下运行终端,执行 hexo new page 页面名,新建页面

               


    文章和页面页中都有一个 markdown 文件,该文件即为文章内容和页面内容    文章页和页面页的详细配置可以查看官方文档:Butterfly 安裝文檔(二) 主題頁面 | Butterfly
               

    如上图创建了一个归档页,和一个测试文章,如下图所示,若页面没有创建,就会出现 Cannot GET /tags/ 找不到资源哦    所以菜单栏处的页面都需要手动进行创建,创建方法与归档相同,但是特殊功能的页面需要其他配置
               

    想实现打字机特效,可以将 _config.butterfly.yml 文件下的 subtitle 配置进行修改即可:
               

    即将如此修改配置文件:subtitle:
enable: false   #将此处改为 true
effect: true
typed_option:
source: false    # 将此处设置为 3
sub:            # 此处随意添加几段话,也可以不添加
    即可开启打字机特效:
               


    还有更多配置等待你的探索,官方文档有详细教程:Butterfly 安裝文檔(二) 主題頁面 | Butterfly



Ⅸ. 将更新后的代码 Push 到远程仓库

    1. 提交代码前,需先添加到 Git 暂存区: git add .
               
    2. 提交代码时,记得养成良好习惯,说明本次提交更新的内容: git commit -m "说明内容"
               
       这里提交代码后,会发现左侧原改动或新增的文件名颜色就会恢复为白色       即表示此时本地仓库内的白名文件,都暂未进行修改
    3. 最后调用 Push 将此次更新后的代码更新到远程仓库
               

    4. 只要你 Push 到远程仓库了,远程 Git 检测到仓库发生改动,就会对 Netlify 发出信号,Netlify 接收信号后,会自动进行重新 Build 构建页面      所以你完全可以不用管 Netlify,只需等待片刻,Netlify 就会将重新构建的页面更新



    最后,能看到这里的都是人才!帖子中还有很多不足,还请各位鱼友多多海涵!    配置过程中遇到的问题,记得可以直接在评论区评论。或者来UangSC's Blog 留言板中留言~    后续如果需要,可以继续追加更详细的配置教程,也可以去网上看大佬们更加丰富的配置~    至此完毕,因为本篇文章篇幅很大,所以楼主觉得真正能够坚持下来搭建的人一定是对其深感兴趣的!    所以有机会我们一定要好好♀交流♂一番(嘿嘿,狗头保命!)
                   https://xxx.ilovefishc.com/album/202003/31/111806sdzhrkjo4ak3px51.jpg


Twilight6 发表于 2023-5-21 02:43:06



博客本质也是写,写笔记,积累经验,对博客不感兴趣的鱼友们完全可以不用搭建!因为这其实就相当于一种云笔记而已!

喜欢做笔记的鱼友们,同样直接在论坛发布笔记、在电脑记事本编写笔记、乃至在纸上书写也是与博客一样的道理!

但是感兴趣的鱼友搭建了博客,更不应忘记本心,博客的本质同样在于写!在于积累经验!

所以此帖子主要面向那些真的想搭建博客的人,但同楼主当时一样仅存于想法中,希望楼主能成为一些鱼友的引路人,让你的想法转变为实现!

liuhongrun2022 发表于 2023-5-21 08:42:56

本帖最后由 liuhongrun2022 于 2023-5-21 08:45 编辑

顶顶顶
我之前用hexo搭建过
由于没有合适的教程,只能看官方文档一点一点摸索
马上弄好的时候,不知输入了什么命令,index.html没了。。。
最后嫌麻烦直接用cnblogs了...

Twilight6 发表于 2023-5-21 10:16:19

liuhongrun2022 发表于 2023-5-21 08:42
顶顶顶
我之前用hexo搭建过
由于没有合适的教程,只能看官方文档一点一点摸索




博客同样是工具,不要遗失本心就行!{:9_237:}

liuhongrun2022 发表于 2023-5-21 10:18:18

Twilight6 发表于 2023-5-21 10:16
博客同样是工具,不要遗失本心就行!


博客最重要的是写文章

歌者文明清理员 发表于 2023-5-21 12:45:31


why

Twilight6 发表于 2023-5-21 12:59:11

歌者文明清理员 发表于 2023-5-21 12:45
why



执行它提示你的那句命令:npm install --force然后再次初始化

歌者文明清理员 发表于 2023-5-21 13:00:49

Twilight6 发表于 2023-5-21 12:59
执行它提示你的那句命令:然后再次初始化

谢谢,置顶一下我们的贴子吧,到时候有人问可以看

歌者文明清理员 发表于 2023-5-21 13:17:55

Twilight6 发表于 2023-5-21 12:59
执行它提示你的那句命令:然后再次初始化

Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。

E:\blog>git init
Initialized empty Git repository in E:/blog/.git/

E:\blog>git add .
warning: adding embedded git repository: themes/butterfly
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint:   git submodule add <url> themes/butterfly
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint:   git rm --cached themes/butterfly
hint:
hint: See "git help submodule" for more information.

E:\blog>git commit -m "Msg"
Msg
12 files changed, 2529 insertions(+)
create mode 100644 .github/dependabot.yml
create mode 100644 .gitignore
create mode 100644 _config.landscape.yml
create mode 100644 _config.yml
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 scaffolds/draft.md
create mode 100644 scaffolds/page.md
create mode 100644 scaffolds/post.md
create mode 100644 source/_posts/hello-world.md
create mode 100644 themes/.gitkeep
create mode 160000 themes/butterfly

E:\blog>git remote add origin https://github.com/dddddgz/blog.git

E:\blog>git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/dddddgz/blog.git'

E:\blog>

Twilight6 发表于 2023-5-21 13:21:26

歌者文明清理员 发表于 2023-5-21 13:17



你应该是忘记把主题仓库里的 .git 文件夹删了

歌者文明清理员 发表于 2023-5-21 13:22:51

Twilight6 发表于 2023-5-21 13:21
你应该是忘记把主题仓库里的 .git 文件夹删了

Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。

E:\blog>git init
Reinitialized existing Git repository in E:/blog/.git/

E:\blog>git add .

E:\blog>git commit -m "Msg"
On branch master
nothing to commit, working tree clean

E:\blog>git remote add origin https://github.com/dddddgz/blog.git
error: remote origin already exists.

E:\blog>git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/dddddgz/blog.git'

E:\blog>

Twilight6 发表于 2023-5-21 13:29:17

歌者文明清理员 发表于 2023-5-21 13:22




git remote 关联只需要调用一次即可,另外最后的报错显示找不到这个分支,但是前面你提交时候显示的是 master

而不是 main,所以你试着将最后行代码更改为 git push -u origin master安装 git 时,你应该使用了默认的 master 作为分支名吧?而没有修改为 main

那么此后若没有指名分支,那么就为默认设置的分支名

歌者文明清理员 发表于 2023-5-21 13:30:32

Twilight6 发表于 2023-5-21 13:29
git remote 关联只需要调用一次即可,另外最后的报错显示找不到这个分支,但是前面你提交时候显示 ...

这样算正常吗
Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。

E:\blog> git push -u origin master
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
info: please complete authentication in your browser...
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
warning: ----------------- SECURITY WARNING ----------------
warning: | TLS certificate verification has been disabled! |
warning: ---------------------------------------------------
warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Delta compression using up to 12 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (17/17), 27.98 KiB | 6.99 MiB/s, done.
Total 17 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/dddddgz/blog.git
*       master -> master
branch 'master' set up to track 'origin/master'.

Twilight6 发表于 2023-5-21 13:34:47

歌者文明清理员 发表于 2023-5-21 13:30
这样算正常吗
Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。
...



对,正常,前面是 warning 是警告,好像是证书有关的警告,我了解也不多

另外你前面报错的图片评论别删,我教程中直接引用了哦

歌者文明清理员 发表于 2023-5-21 13:37:15

Twilight6 发表于 2023-5-21 13:34
对,正常,前面是 warning 是警告,好像是证书有关的警告,我了解也不多

另外你前面报错的图片 ...

另外hexo init那个需要win+r,cmd,ctrl+shift+enter(管理员模式运行cmd)
然后再手动cd

Twilight6 发表于 2023-5-21 13:40:15

歌者文明清理员 发表于 2023-5-21 13:37
另外hexo init那个需要win+r,cmd,ctrl+shift+enter(管理员模式运行cmd)
然后再手动cd



!还能这样以管理员模式运行,我学到了

那个管理员的稍等我额外多加一部分教程

歌者文明清理员 发表于 2023-5-21 13:41:59

Twilight6 发表于 2023-5-21 13:40
!还能这样以管理员模式运行,我学到了

那个管理员的稍等我额外多加一部分教程

还有vi部分的1.5章节,少了个换行

Twilight6 发表于 2023-5-21 13:45:59

歌者文明清理员 发表于 2023-5-21 13:41
还有vi部分的1.5章节,少了个换行



能截个图吗,我这儿好像看不出问题

歌者文明清理员 发表于 2023-5-21 13:48:47

Twilight6 发表于 2023-5-21 13:45
能截个图吗,我这儿好像看不出问题

歌者文明清理员 发表于 2023-5-21 13:53:37


{:10_277:}
页: [1] 2 3 4 5 6
查看完整版本: 【个人博客搭建】Hexo + Github + Netlify 静态个人博客搭建(无需购买服务器)