Next主题的博客搭建 | vegeone
0%

Next主题的博客搭建

写在前面

​ 这个博客搭建起来已经有一年半的时间了,但是后面一直因为各种原因没有能将自己的搭建过程以及遇到的困难分享出来。现在闲来无事,也正好准备将自己的搭建过程分享一下,顺便研究一下为什么自己的博客只有用VPN才能加载出来。

​ 对于电脑小白而言,非常推荐这篇知乎,除了时间有点久远,内容真的很详细:(从零开始搭建个人博客(超详细) - 知乎

搭建过程

环境配置

​ 我的博客的相关内容都存放在Github仓库下,所以你需要有一个自己的Github账号以及Github仓库,可以点击此超链接进入GitHub官网。同时你也需要配置好Git,可以点击此超链接进入Git官网,其中git中的复制粘贴不是 Ctrl+C 和 Ctrl+V,而是 Ctrl+insert 和Shift+insert。最后将git与GitHub绑定。

​ 由于该博客是基于Hexo的博客,所以需要下载一些前端框架配置,比如Node.js以及Hexo,你需要在你放置博客项目的本地文件夹(下文都称为Blog)中下载Hexo

建立用于博客的存储仓库

方法1

  1. 你可以在Github中查看已有的仓库

Github仓库

  1. 然后点击New新建一个博客仓库,仓库名称为:(此处替换为你的Github名称).github.io

  2. 如图所示,复制SSH代码后。找一个本地你用于部署博客项目的空的Blog文件夹,右键选择Git Bash Here,在弹出的窗口中输入git clone (此处粘贴你的仓库中复制的SSH代码)

Github仓库同步
git

  1. 由于通过这种方式创建项目第一次提交会需要一些验证,所以你可以在此文件夹中随意添加txt等文件,再进行一次提交完成验证,可以在Git Bash Here窗口中输入以下代码:

    1
    2
    3
    4
    5
    git add .
    git commit -m "first submit"
    git config --global user.name "(此处修改为你的Github名称)"
    git config --global user.email "(此处修改为你的Github绑定的邮箱)"
    git push origin main
  2. 此时你还需要去Github官网那边输入一次密码完成验证

方法2

​ 就是经典的Github的创建项目的方法,相关内容可以参考我的另一篇博客

1
2
3
4
git init
git remote add origin (此处修改为你的SSH代码)
git pull origin master
后续的第一次提交如方法1

完成Hexo相关配置

在进入本地放置博客的Blog文件夹中,通关Git Bash Here进入Git操作界面,然后依次输入以下指令

1
2
3
npm install -g hexo-cli
hexo init
hexo g

此时你可以在浏览器网址输入网址http://localhost:4000,查看博客的模板页面。

然后打开文件夹下的_config.yml文件,修改以下代码(注意,:与后面的内容之间有空格):

1
2
3
4
deploy:
type: git
repository: #此处你的仓库地址
branch: main

然后回到刚刚的Git操作界面,输入指令

1
npm install hexo-deployer-git --save

最后输入以下三个经典指令(这三个指令在之后你往博客里面修改完内容想要更新博客时都需要),再打开http://localhost:4000,如果还能正常显示即可

1
2
3
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)

到此为止,其实博客的搭建其实已经完毕,如果需要访问博客只需要输入

1
2
https://(此处替换为你的博客仓库名称即可)
例如https://example.github.io

后续只剩一些内容上的美化,例如设置个性化域名,添加个性主题等等

Blog文件夹结构

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题

博客的创建以及更新在下一篇博客优化的首部