hexo-更换电脑

Catalogue
  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.0.0.1. 至此,Nginx的配置就基本完成了。下面的步骤是nginx管理相关,可以跳过。
  • 2.2. 通过 systemctl 管理 Nginx
  • 2.3. Nginx 的配置文件和最佳实践
  • 2.4. 服务器安装Nodejs
  • 2.5. 服务器安装Git以及进行相关配置
  • 3.
  • 4. 主题安装
  • 5. typora插入图片设置
    1. 5.1. 设置typora
    2. 5.2. 修改hexo配置文件并安装插件
    3. 5.3. 新建一篇博客进行测试
  • 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"

      如下图:

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

      1
      2
      cd ~/.ssh
      ls

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

      1
      chmod 600 ~/.ssh/id_rsa

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

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

      如下图:

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

    安装Nodejs

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

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

    安装Hexo框架

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

    1
    npm install -g hexo-cli

    如下图:

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

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

    1
    npm install hexo-deployer-git --save

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

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

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

    服务端配置

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

    1
    sudo yum update 

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

    1
    cat /etc/centos-release

    安装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) <[email protected]>"
      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 欢迎页面,类似于下图所示:

    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管理相关,可以跳过。
    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 -v以及npm -v查看node的版本。尽量把服务器端和客户端的nodejs 版本保持一致,不然会导致莫名的错误。

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

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

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

      1
      yum install git

      结果如下图:

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

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

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

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

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

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

      接下来设置文件权限,把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

      如下图:

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

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

      如图:

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

      1
      2
      3
      hexo clean
      hexo g
      hexo d

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

    主题安装

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

    安装和配置。

    typora插入图片设置

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

    1. 设置typora

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

    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]);
      });

    参考资料