汪道之

有人的地方就有江湖

0%

hexo+github搭建静态博客

发表于 更新于 分类于 | 置顶 |

写在前面：本来是用windows搭建的博客，但奈何Linux太香了，加上之前装过wsl，所以打算用Linux再搭建一下。另外由于我是搭建好后再写的这篇博客，难免有些记忆错误出现纰漏，望指正。

另：这篇博客持续更新中，现在可能写的还不是很详细，请同时参考参考文献中B站up主code sheep的视频为佳。

下载nodejs和npm

Windows下：

直接在nodejs官网进行下载并安装
node -v命令查看node的版本
npm -v命令查看npm的版本

Linux 下：

可以直接使用命令安装

1
sudo apt install nodejs

可能出现的问题

可能会出现nodejs和npm版本不匹配的问题，这可能是由于Linux上版本太老的缘故，如果出现就要自己手动去官网下载包然后解压在Linux下了

关于nodejs和npm版本适配可参考这个官网说明

问题解决

  1. 下载对应的包：nodejs各种版本官网

  2. 下载好后挪到Linux下，wsl在windows下的目录可以参考C:\Users\Admin\AppData\Local\Packages\TheDebianProject.DebianGNULinux_76v4gfsz19hv4\LocalState\rootfs

  3. 把包放到/opt下，这个文件夹就是用来放用户自己安装的软件的

  4. 解压使用命令tar -xf 包名

  5. 解压成功后应该可以在/opt/包名/bin/目录下看到node和npm，你进入这个目录，使用./node -v和./npm -v就能查看相应版本，但是这样你每次使用必须给路径很麻烦，所以你可以建立一个软链接

  6. 给可执行文件建立软链接：

    1. 输入echo $PATH可以查看你的Linux系统的查找可执行文件的路径，注意大写
    2. 进入/usr/local/bin目录
    3. 使用ln -s [源文件或目录] [目标文件或目录]就可以建立软链接，例如这里的建立node的ln -s /opt/node-v14.16.1-linux-x64/bin/node ./node和npm的ln -s /opt/node-v14.16.1-linux-x64/bin/npm ./npm
    4. 现在你就可以在任何一个目录下使用npm -v和node -v查看版本以及其它命令了

npm加速

为了加快npm的速度有两种方法：

  1. 然后利用npm安装淘宝的cnpm
    npm install -g cnpm --registry=http://registry.npm.taobao.org命令安装淘宝的cnpm包管理器
    cnpm -v命令查看cnpm的版本

  2. npm换源

    npm config get registry可以查看源地址

    npm config set registry [url]可以更换源地址

    其中url可选：

    https://registry.npmjs.org/为官方源地址

    https://registry.npm.taobao.org/为淘宝源地址

下载hexo并创建本地的静态博客

  1. cnpm install -g hexo-cli安装hexo
  2. hexo -v查看hexo版本
  3. 然后创建一个你存博客的目录并进入到该目录
    mkdir blog
    cd blog
  4. 使用hexo init在当前目录下生成博客的框架
  5. 使用hexo s开启博客，进入http://localhost:4000/查看本地博客内容
  6. 使用hexo n "文章名"创建新的文章，然后找到在/source/_post目录下找到文章编辑即可，使用markdown语法，markdown语法参考，很简单，一会就能学会，你也可以下一款markdown编辑器，我用的typora

部署到GitHub上

  1. 在你的GitHub上新建一个仓库，命名为YourGithubName.github.io
  2. 然后cnpm install --save hexo-deployer-git在blog目录下安装git部署插件
  3. 下面配置_config.yml
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 		type: git
		repo: https://github.com/YourGithubName/YourGithubName.github.io.git
 		branch: master

  1. 最后运行以下三条命令：
    hexo clean清理
    hexo g生成
    hexo d部署

    以上三条命令基本是每次修改博客后都要运行的

  2. 最后在https://YourGithubName.github.io下就可以查看啦！

  3. 注意浏览器可能会有缓存导致生效比较慢，每次更新后可shift+F5强制刷新并多等会

主题的更换

更改主题一般分三步：

  1. git clone https://github.com/theme-next/hexo-theme-next themes/next利用git将别人仓库里的主题克隆到自己的blog下的themes文件夹里
  2. 修改blog目录下的 _config.yml 文件中的 theme改为theme: next
  3. 更改完成，运行hexo clean&&hexo g&&hexo d就可以看到变化啦

其他资料

关于主题的美化和一些其他配置，博主小丁的博客里介绍的非常详细，我也是根据他的博客一步步来的，他的博客地址

参考文献

  1. b站大佬视频讲解
  2. 逗比学长的博客