前言
本期教程是基于hexo博客框架搭建并部署到github上实现个人网站。
特效背景:canvas-nest.js
正文
工具的安装
安装node.js
-
在这里并不需要了解node.js是个什么东西,知道它是搭建个人站点的一个工具就行了,不影响后续操作。
下载node.js
下载左边的长期支持版。检验安装
windows用户win+r输入cmd唤出命令提示符界面
*然后打开这个界面就行了
下载node.js会附带npm
在这里输入node -v
npm -v
来查看是否下载成功和版本号。
安装Git
注意:你的github用户名会成为你的域名前缀
安装博客编辑器VScode
关于编辑器,问,就是vscode!
VScode下载地址
插件安装具体见另一篇文章 用vscode写markdown.
安装hexo博客框架
安装cnpm
本来是要用npm来安装hexo的,但是在国内安装镜像源的速度非常慢,所以需要先利用npm下载淘宝镜像。输入npm install -g cnpm --registry=https://registry.npm.taobao.org
下载完成后输入cnpm -v
查看版本 。安装hexo
然后就可以用cnpm来安装hexo了.输入cnpm install -g hexo-cli
进行安装,等待安装完成。(后期所有npm安装的东西基本上都可以cnpm来代替)新建文件夹
输入mkdir blog
来新建一个文件夹,当然可以任意取名,我用的是blog。之后的所有东西都会在这个新建的文件夹中进行。
注:如果出现了某些神奇的问题,难以解决,直接把这个文件夹干掉,重新来过就行。初始化博客
命令行:cd blog
进入文件夹
由于这里是从win+r cmd进入的命令提示符,已经是管理员运行的身份,所以输入hexo init
初始化博客。这里会等待很长的一段时间,可以看看电视,打把游戏之类的。
本地运行
输入heox s
然后进入本地预览。有一篇hello world,下面有关于hexo的一些使用方法。注:hexo支持缩写
如何新建一篇文章
- 在blog文件夹下
hexo n "我的第一篇博客"
打开blog\source\ _posts文件夹就会发现多了一个我的第一篇博客.md - 打开就可以编辑想要的内容了,编辑后保存关闭。
- 先
hexo clean
清理一下 - 再
hexo g
生成静态文件 - 重新启动hexo
hexo s
,在本地4000端口就有了一篇新的博客。
将博客部署到github
- 登录你的github账户
- 新建一个储存库
如上图。我用了google翻译,所以是中文的。
注意:前面的那个就是用户名,仓库名必须是这个!那个双引号只是为了强调,不能加!
下面的那个框是‘描述’,写不写随便,然后点击最下面的的绿色按键就OK啦!
3. 复制仓库链接
4. 配置blog目录下的_config.yml
文件
5. 打开文件,(可以用记事本直接打开,省事,并不影响操作。)滑到文件最下面修改以下配置
deploy:
type: git
repo: 储存库的地址
branch: master
把储存库的地址拷贝上去就行了。
注意了,每个冒号后面都要有一个空格,别忘了仔细检查一下
- 保存退出,在命令行中输入(blog目录下)
hexo d
,然后输入的github账号和密码就OK啦。
密码不会显示,别以为没输上去就一直敲(过来人的友情提醒)
- 访问https://储存库名,就可以看到刚才写的博客了。(由于是国外服务器,访问比较慢,多刷新几次就好。)
到此所有操作都已完成,你就可以写自己的博客了。
特别声明:
推荐
推荐一个B站up主:Codeheep(程序羊)
我也是他的小粉丝,他有一期视频是讲解如何搭建博客的,非常到位。过去看看
主题
本主题使用的是云游君的yun,去看看
如果你也喜欢本主题,去点个star就可以使用了。
常见错误
在这里我会写一下搭建过程中常见的一些错误及纠正方法,如果在搭建时出了错,可以在评论下方留言,或者到QQdd我,我可以帮你一起解决(我小白一个,真解决还得找‘度娘‘’谷哥‘,哈哈)
hexo无法部署到远端
解决方案:
- 复制仓库的ssh地址,就在HTTPS的旁边。
- 到blog文件下的
_config.yml
文件,就是刚才修改配置的那个文件。(我再放一下图吧)
将刚复制的链接拷贝到repo:后面(冒号还是要空出一个空格的) - 设置github的ssh密钥,具体教程.(这个教程写的很详细。)
- 本文链接:http://qiaodai-m.com/2020/04/10/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99/
- 版权声明:本博客所有文章除特别声明外,均默认采用 许可协议。
若没有本文 Issue,您可以使用 Comment 模版新建。
GitHub Issues