hexo-更换电脑

文章目录
  1. 1. hexo迁移
    1. 1.1. 总体思路
    2. 1.2. 客户端配置
    3. 1.3. 安装Nodejs
    4. 1.4. 安装Hexo框架
  2. 2. 服务端配置
    1. 2.1. 安装Nginx
      1. 2.1.1. 至此,Nginx的配置就基本完成了。下面的步骤是nginx管理相关,可以跳过。
    2. 2.2. 通过 systemctl 管理 Nginx
    3. 2.3. Nginx 的配置文件和最佳实践
    4. 2.4. 服务器安装Nodejs
    5. 2.5. 服务器安装Git以及进行相关配置
  3. 3.
  4. 4. 主题安装
  5. 5. typora插入图片设置
    1. 5.1. 设置typora
    2. 5.2. 修改hexo配置文件并安装插件
    3. 5.3. 新建一篇博客进行测试
  6. 6. archlinux下Hexo博客新建文章后自动打开编辑器
    1. 6.1. 参考资料

hexo迁移

总体思路

把hexo从windows迁移到archlinux下面

迁移的大致是在新系统里面安装git,配置ssh_key,安装nodejs,安装hexo,把原来的文件夹整体拷贝过来,在拷贝过来的根目录下面安装或者升级一下包 npm install。然后测试一下

1
2
3
4
hexo clean
hexo g
hexo s
hexo d

以下是博客搭建的全过程,为了统一说法,统一将云主机称为服务端,将本地电脑称为客户端。
本次搭建博客需要在客户端以及服务端进行一系列配置。先说一下整体的实现思路。总的来说分两大步。
第一步,在客户端进行以下工作:

  • 安装Git服务以及配置Git
  • 安装nodejs
  • 安装Hexo框架

第二步,在服务端进行以下工作:

  • 安装Nginx服务
  • 安装Git服务以及nodejs
  • 搭建Git服务器以及配置自动部署

客户端配置

  1. 安装git ,这个在arch安装的时候好像是安装了,或者 sudo pacman -S git 安装git。

  2. 安装完成之后,打开Git Bash进行以下配置。(注:此处假定读者已经在github上注册了github账号。)
    (1)、输入以下代码设置用户名和邮箱:

    1
    2
    3
    4
    5
    6
    # 将此处的"yourname"替换成自己的用户名,配置git用户名
    git config --global user.name "yourname"

    # 将此处的"youremail"替换成自己的邮箱,配置邮箱
    git config --global user.email "youremail"

    如下图:

    客户端git配置

    (2)、输入以下代码进入.ssh目录检查是否有SSH Key

    1
    2
    cd ~/.ssh
    ls

    image-20210323225937727

    我这里是的文件是直接从windows用户目录的.ssh文件夹拷贝过来的,拷贝过来需要注意更改一下 id_rsa 文件的权限,需要改成只能自己读。

    1
    chmod 600 ~/.ssh/id_rsa

    如果.ssh目录里面是空的就要新建SSH Key。

    1
    2
    # 将此处的"youremail"替换成自己的邮箱
    ssh-keygen -t rsa -C "youremail"

    如下图:

    设置ssh key

​ 接着继续输入cat ~/.ssh/id_rsa.pub,然后将得到的秘钥先复制一下,待会服务器配置需要用到。
​ 如下图:

ssh key

安装Nodejs

我在arch是直接用的 sudo pacman -S nodejs 安装的,默认安装的是最新的版本,也可以 yay -S nvm

安装管理器,然后在管理器里面安装自己需要的nodejs版本。安装完成以后输入 node -v npm -v 可以查看node以及npm的版本信息:

image-20210323231408372

安装Hexo框架

这里可以全局或者局部安装到特定目录,我就直接按照hexo的官网全局安装了。

1
npm install -g hexo-cli

如下图:

安装hexo

安装完hexo框架,就可以开始初始化hexo了,选择一个目录存放你的博客文件,然后切换到那个目录。
接着,输入hexo init blog进行初始化hexo。如下图:

初始化hexo

初始化完成以后,安装hexo部署包

1
npm install hexo-deployer-git --save

安装完成以后打开博客根目录的 package.json 文件,应该可以在dependencies的配置中看到 hexo-deployer-git 这一项:

image-20210323232308740

安装完包之后,接着在终端输入:hexo s,启动本地服务,然后在浏览器输入localhost:4000,就可以看到hexo已经搭建成功了。如下图:

hexo 博客

至此,客户端的配置就告一段落了。接下来开始服务端的配置。

服务端配置

ssh 到服务器,windows下面使用 xshell ,finalshell ,或者putty, archlinux下面直接终端ssh到服务器,先更新系统

1
sudo yum update 

更新完系统,输入以下代码,可查看系统版本:

1
cat /etc/centos-release

preview

安装Nginx

  1. EPEL 仓库中有 Nginx 的安装包。如果你还没有安装过 EPEL,可以通过运行下面的命令来完成安装:

    1
    sudo yum install epel-release

    如果这是您第一次从 EPEL 仓库中安装软件,yum 可能会提示您导入 EPEL GPG key:

    1
    2
    3
    4
    5
    6
    7
    Retrieving key from file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
    Importing GPG key 0x352C64E5:
    Userid : "Fedora EPEL (7) <epel@fedoraproject.org>"
    Fingerprint: 91e9 7d7c 4a5e 96f1 7f3e 888f 6a2f aea2 352c 64e5
    Package : epel-release-7-9.noarch (@extras)
    From : /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
    Is this ok [y/N]:

    类似于上面的内容,遇到这种情况,输入 y,然后 Enter(回车) 即可继续安装。

  2. 输入以下命令来安装 Nginx:

1
sudo yum install nginx
  1. 等到安装完成以后,可以通过以下命令来设置开机启动和运行 Nginx 服务:

设置 Nginx 开机启动:

1
sudo systemctl enable nginx

运行以上命令以后,会输出类似以下的内容,表示创建了一个软连接来关联 Nginx,不用担心,并不是报错了,下一步就可以启动 Nginx 了。

1
Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /usr/lib/systemd/system/nginx.service.

启动 Nginx:

1
2
sudo systemctl start nginx
sudo systemctl enable nginx #允许开机启动

通过运行以下命令,来检查 Nginx 的运行状态:

1
sudo systemctl status nginx

然后会输出类型下面的内容

1
2
3
4
5
6
7
8
9
10
● nginx.service - The nginx HTTP and reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
Active: active (running) since Mon 2018-03-12 16:12:48 UTC; 2s ago
Process: 1677 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
Process: 1675 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
Process: 1673 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
Main PID: 1680 (nginx)
CGroup: /system.slice/nginx.service
├─1680 nginx: master process /usr/sbin/nginx
└─1681 nginx: worker process
  1. 如果你的服务器开启了防火墙,则需要同时打开 80(HTTP)和 443(HTTPS)端口

通过下面的命令来打开这两个端口:

1
2
3
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

国内的服务器厂商,安全组也可能会默认屏蔽这两个端口,比如 阿里云 和 腾讯云,如果在 第 5 步 时发现无法访问,可以自行谷歌一下如何放开这两个端口。

  1. 验证 Nginx 是否成功启动,可以在浏览器中打开 http://YOUR_IP,您将看到默认的 Nginx 欢迎页面,类似于下图所示:

    Welcome to Nginx

  2. 配置Nginx
    接下来,需要修改一下nginx的相关配置,包括设置网站根目录以及配置域名。输入以下代码,打开Nginx的配置文件。(注:此处假定读者已完成了域名备案以及域名解析。)

    配置Nginx
    接下来,需要修改一下nginx的相关配置,包括设置网站根目录以及配置域名。输入以下代码,打开Nginx的配置文件。(注:此处假定读者已完成了域名备案以及域名解析。)

    1
    vi /etc/nginx/conf.d/default.conf

    依照下图进行修改,将“/usr/share/nginx/html”改为“/usr/share/nginx/html/blog”。

    nginx配置

    至此,Nginx的配置就基本完成了。下面的步骤是nginx管理相关,可以跳过。
  3. 通过 systemctl 管理 Nginx

    你可以像管理其他服务那样管理 Nginx。

    启动 Nginx

    1
    sudo systemctl start nginx

    停止 Nginx

    1
    sudo systemctl stop nginx

    重启 Nginx

    1
    sudo systemctl restart nginx

    修改 Nginx 配置后,重新加载

    1
    sudo systemctl reload nginx

    设置开机启动 Nginx

    1
    sudo systemctl enable nginx

    关闭开机启动 Nginx

    1
    sudo systemctl disable nginx
  4. Nginx 的配置文件和最佳实践

    • 通过以上方式安装的 Nginx,所有相关的配置文件都在 /etc/nginx/ 目录中。
    • Nginx 的主配置文件是 /etc/nginx/nginx.conf
    • 为了使 Nginx 配置更易于维护,建议为每个服务(域名)创建一个单独的配置文件。
    • 每一个独立的 Nginx 服务配置文件都必须以 .conf 结尾,并存储在 /etc/nginx/conf.d 目录中。您可以根据需求,创建任意多个独立的配置文件。
    • 独立的配置文件,建议遵循以下命名约定,比如你的域名是 kaifazhinan.com,那么你的配置文件的应该是这样的 /etc/nginx/conf.d/kaifazhinan.com.conf,如果你在一个服务器中部署多个服务,当然你也可以在文件名中加上 Nginx 转发的端口号,比如 kaifazhinan.com.3000.conf,这样做看起来会更加友好。
    • 如果你的配置中有很多重复的代码,那么建议你创建一个 /etc/nginx/snippets 文件夹,在这里面存放所有会被复用的代码块,然后在各个需要用到的 Nginx 的配置文件中引用进去,这样可以更方便管理和修改。
    • Nginx 日志文件(access.logerror.log )位于 /var/log/nginx/ 目录中。建议为每个独立的服务配置不同的访问权限和错误日志文件,这样查找错误时,会更加方便快捷。
    • 你可以将要部署的代码文件,存储在任何你想的位置,但是一般推荐存放在下列位置中的其中一个:
      • /home/<user_name>/<site_name>
      • /var/www/<site_name>
      • /var/www/html/<site_name>
      • /opt/<site_name>
      • /usr/share/nginx/html

    服务器安装Nodejs

    输入以下代码进行Nodejs的安装。或者自己安装 n 管理器来安装,参考 n

    1
    yum install nodejs

    结果如下图:

node安装

可输入node -v以及npm -v查看node的版本。尽量把服务器端和客户端的nodejs 版本保持一致,不然会导致莫名的错误。

至此,Nodejs的安装就完成了。

服务器安装Git以及进行相关配置

  1. 输入以下代码,进行Git的安装

    1
    yum install git

    结果如下图:git安装

  2. 创建git用户以及设置密码
    输入以下代码:

    1
    2
    3
    4
    5
    #创建用户,用户名为git
    adduser git
    #设置密码
    passwd git

    添加git用户

  3. 把git用户添加到sudo用户组中
    输入以下代码sudo vi /etc/sudoers,打开sudoers文件,输入:/root进行搜索,搜索到代码行root ALL=(ALL) ALL,然后在这一行下添加以下代码git ALL=(ALL) ALL。输入完毕之后,按wq!强制保存退出vi。
    效果如下图:git-sudoers

  4. 切换到git用户,添加SSH Key文件并且设置相应的读写与执行权限。
    输入以下代码:

    1
    2
    3
    4
    5
    6
    # 切换用户
    su git
    # 创建目录
    mkdir ~/.ssh
    # 新建文件
    vim ~/.ssh/authorized_keys

    然后把之前在客户端设置的SSH Key,复制到authorized_keys文件中,保存后退出。如下图:git sshkey

    接下来设置文件权限,把authorized_keys文件设置成只有属主有读写权限,把ssh目录设置为只有属主有读、写、执行权限。代码如下:

    1
    2
    chmod 600 ~/.ssh/authorized_keys
    chmod 700 ~/.ssh

    设置完后,返回客户端,打开终端,输入以下代码,测试是否能连接上服务器:

    1
    2
    # ServerIP为你自己服务器的ip
    ssh -v git@ServerIP

    结果如下图:测试连接

  5. 重新回到服务器,在网站根目录新建一个blog文件夹,用于客户端上传文件,并且把该文件授权给git用户。代码如下:

    1
    2
    3
    # 使用sudo指令,需要输入git用户的密码
    sudo mkdir -p /usr/share/nginx/html/blog
    sudo chown -R git:git /usr/share/nginx/html/blog
  6. 在服务器上初始化一个git裸库
    切换到git用户,然后切换到git用户目录,接着初始化裸库,代码如下:

    1
    2
    3
    su git
    cd ~
    git init --bare blog.git

    接着新建一个post-receive文件

    1
    vim ~/blog.git/hooks/post-receive

    然后在该文件中输入以下内容:

    1
    2
    #!/bin/sh
    git --work-tree=/usr/share/nginx/html/blog --git-dir=/home/git/blog.git checkout -f

    保存退出之后,再输入以下代码,赋予该文件可执行权限。

    1
    chmod +x ~/blog.git/hooks/post-receive

    如下图:设置git

  7. 返回客户端,设置博客根目录下的_config.yml文件。

    1
    2
    3
    4
    5
    deploy:
    type: git
    repo: git@SERVER:/home/git/blog.git #此处的SERVER需改为你自己服务器的ip
    branch: master #这里填写分支
    message: #提交的信息

    如图:deploy 配置

    保存后,在博客根目录打开Git Bash,输入以下命令:

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    部署完毕之后,即可在浏览器输入你的服务器ip进行访问你的博客了。

    线上博客

主题安装

这是我喜欢的一个主题,hexo 5 下面 hexo 会报错,不过也可以用。参考 hexo-theme-Wikitten

安装和配置。

typora插入图片设置

参考这个 hexo和typora图片无法正常显示解决方案 感觉这个配合typora 比较顺手。

  1. 设置typora

    依次点击:文件-》偏好设置-》图像,进行如下设置:img

  2. 修改hexo配置文件并安装插件

    • 修改_config.yml文件:post_asset_folder: true
    • npm install hexo-image-link --save安装插件
  3. 新建一篇博客进行测试

    • hexo new "test" 新建test.md文件,此时会再同级目录下新建test文件夹。

    • 用typora编辑test.md文件,随便拷贝一张图片head.jpg粘贴到typora中。此时图片会自动拷贝到test文件夹。

    • 检查粘贴后的文件路径是否为test/head.jpg,如果不是请回第一步设置好typora。

    • hexo s 进行测试,查看hexo是否正常显示图片。

    • 大功告成

    archlinux下Hexo博客新建文章后自动打开编辑器

    参考 https://github.com/hexojs/hexo/issues/1007

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    You can try to listen to the new event. For example:

    var spawn = require('child_process').spawn;

    // Hexo 2.x
    hexo.on('new', function(path){
    spawn('vi', [path]);
    });

    // Hexo 3
    hexo.on('new', function(data){
    spawn('vi', [data.path]);
    });

    进入到hexo 根目录,看看是否有 scripts 文件夹,如果没有就新建。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    mkdir scripts
    # 创建文件夹
    vim AutoOpenEditor.js
    # 创建js文件

    # typora& 让typora后台运行,终端按下Ctrl + C 后typora不会退出
    var spawn = require('child_process').spawn;
    // Hexo 3
    hexo.on('new', function(data){
    spawn('typora&', [data.path]);
    });

参考资料