Charlie's VuePress

修改日期

2020-03-17 20:34:52

从零开始搭建博客

category:

  • 教程 tags:
  • 博客
  • Hexo
  • Volantis
  • git
  • Github

写在前面

这篇文章是为小白和伸手党准备的，所以一切步骤都尽可能的简化。

准备

首先，我们需要注册一个Github账户在新标签页打开。在注册页面输入Username（唯一用户名），Email（你的邮箱）和Password（密码），然后直接选择 Free 账户，填写资料（可选）并按照要求点击邮件里的链接进行验证。

恭喜，你注册了一个Github账户！

接下来创建一个新仓库在新标签页打开，在Repository name处填写用户名.github.io（如charlie-zzy.github.io），勾选Initialize this repository with a README，不用管别的选项，直接确定即可。

下载node.js在新标签页打开，VScode在新标签页打开和Git在新标签页打开并安装。

恭喜，你安装了node.js运行环境！

恭喜，你安装了VScode代码编辑器！

恭喜，你安装了Git包管理器！

在电脑里新建一个文件夹用于存放博客文件（建议路径短一点，最好别包含中文名文件夹）。

同时按 Win+R 打开运行窗口，输入powershell并回车打开终端，在终端中输入cd 目录并回车进行切换目录（如cd D:/blog/） ，此时可以看到左侧的目录变成了你需要的目录，依次一行一行输入以下命令（并换行）进行安装。

npm install -g hexo-cli
hexo init
npm install
npm install hexo-deployer-git --save
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-stylus

恭喜，你安装了Hexo博客引擎！

恭喜，你安装了Volantis博客主题！

写作

当安装完成时，可以发现目录变成这样了：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
    └── volantis

主要文件的意思：

  • _config.yml网站的配置信息，你可以在此配置大部分的参数。
  • _posts文件夹存放文章，你可以在这里编辑以Markdown在新标签页打开格式存放的文章。
  • volantis文件夹存放主题文件，里面也有一个_config.yml是主题的配置信息。

输入以下命令可以新建文章，然后在_posts目录找到这个文件使用VScode打开。

hexo new 文章名

恭喜，你新建了一篇文章！

在 VScode 中，点击页面右上角书与放大镜按钮可以实时预览最终的样子，参考这篇帮助在新标签页打开可以了解 Markdown 的语法。

当你写完并参考Volantis 主题文档在新标签页打开和Hexo 文档在新标签页打开修改了自己喜欢的配置后，就可以发布了。

发布

  • 运行hexo clean清除缓存
  • 运行hexo g生成文件
  • 运行hexo s开启本地预览（Ctrl+C 退出）

打开浏览器，输入localhost:4000，你就会看到自己的博客。

恭喜，你做好了博客！

然而现在的博客只能在自己的电脑上预览，该如何部署到网站上呢？

上传

输入以下命令，将尖括号和尖括号中的用户名和邮箱替换为自己的，并输入进刚才那个终端，疯狂按回车。

git config --global user.name "<Github注册的用户名>"
git config --global user.email <Github注册的邮箱>
ssh-keygen -t rsa

例：

git config --global user.name "charlie-zzy"
git config --global user.email neycbs@outlook.com
ssh-keygen -t rsa

在输出的Your public key has been saved in 什么的后面的目录中找到id_ras.pub文件并拿记事本打开，全选，复制。

在这个页面在新标签页打开中点击New SSH key。其中Title随便填，Key把刚才复制的代码粘贴上去并保存。

在终端输入以下代码，看看 Hi 后面是不是自己邮箱，是就成功了。

ssh -T git@github.com

打开博客目录里的_config.yml配置文件（不是 volantis 文件夹里那个），在末尾找到deploy字样，修改后面的东西并替换成以下字符（注意空格）：

deploy:
  type: git
  repository: git@github.com:<Github用户名>/<Github用户名>.github.io.git
  branch: master

例：

deploy:
  type: git
  repository: git@github.com:charlie-zzy/charlie-zzy.github.io.git
  branch: master

设置好后每次hexo g生成博客后，只要输入hexo d并等一会，让服务器刷新后就可以访问<Github用户名>.github.io这个网站啦！

恭喜，你上传了博客！

后记

Volantis在新标签页打开作者xaoxuu在新标签页打开真的超肝...一天一个版本，现在才配置好 qwq

其实这些步骤都是一次性的，真正有意思和挑战性的是修改配置（详见主题文档在新标签页打开和Hexo 文档在新标签页打开。）

这篇文章是博客更新后的第一篇技术性文章诶

最近更新: