搭建个人博客

在root下安装

sudo su

1. 安装nodejs

brew install nodejs

2. 更改镜像元

npm install -g cnpm --registery=https://registry.npm.taobao.org

3. 安装haxo博客

cnpm install -g hexo-cli

4. 初始化博客

在根目录创建文件夹

sh-3.2# pwd
/Users/xuxinghua
sh-3.2# mkdir blog
sh-3.2# cd blog/
sh-3.2# ls
sh-3.2# pwd
/Users/xuxinghua/blog

用管理员的命令来执行

sh-3.2# sudo hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into '/Users/xuxinghua/blog'...
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 77 (delta 4), reused 5 (delta 2), pack-reused 68
Unpacking objects: 100% (77/77), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/Users/xuxinghua/blog/themes/landscape'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (29/29), done.
remote: Total 929 (delta 12), reused 12 (delta 3), pack-reused 896
Receiving objects: 100% (929/929), 2.56 MiB | 181.00 KiB/s, done.
Resolving deltas: 100% (492/492), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.

> fsevents@1.2.9 install /Users/xuxinghua/blog/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/xuxinghua/blog/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
added 408 packages from 520 contributors and audited 6879 packages in 22.577s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

可以看下在blog文件夹下生成了哪些文件

sh-3.2# ls -l
total 120
-rw-r--r--   1 root staff   1765 Jun 28 19:14 _config.yml
drwxr-xr-x 274 root staff   8768 Jun 28 19:14 node_modules
-rw-r--r--   1 root staff 110677 Jun 28 19:14 package-lock.json
-rw-r--r--   1 root staff    443 Jun 28 19:14 package.json
drwxr-xr-x   5 root staff    160 Jun 28 19:14 scaffolds
drwxr-xr-x   3 root staff     96 Jun 28 19:14 source
drwxr-xr-x   3 root staff     96 Jun 28 19:14 themes

5. 启动博客

sh-3.2# hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

6. 写博客

比如博客名叫做：我的第一篇博客文章

sh-3.2# hexo n "我的第一篇博客文章"

博客部署到github上公开使用

1. 新建仓库

Reposity name：Xumingmingming.github.io

必须是你的github的昵称


2. 安装git的部署插件

   sh-3.2# cnpm install --save hexo-deployer-git

   peerDependencies WARNING 不用管

3. 修改_config.yml

   在最后：

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: https://github.com/Xumingmingming/xuxinghua.github.io.git
     branch: master

4. 部署到远端

   sh-3.2# hexo d

更换主题

换的是这个主题

• 下载主题：

  当前目录在blog目录，clone到blog/themes下的yilia文件夹下

  git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

• 配置主题

  修改_config.yml

  # Extensions
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: landscape

  改成：

  # Extensions
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: yilia

• 重启

  Clean—>g(重新生成)—>s(start)

  sh-3.2# hexo clean
  INFO  Deleted database.
  INFO  Deleted public folder.
  sh-3.2# hexo g
  INFO  Start processing
  INFO  Files loaded in 403 ms
  INFO  Generated: index.html
  INFO  Generated: archives/index.html
  INFO  Generated: fonts/default-skin.b257fa.svg
  INFO  Generated: img/preloader.gif
  INFO  Generated: fonts/iconfont.16acc2.ttf
  INFO  Generated: fonts/iconfont.45d7ee.svg
  INFO  Generated: img/scrollbar_arrow.png
  INFO  Generated: fonts/iconfont.b322fa.eot
  INFO  Generated: fonts/iconfont.8c627f.woff
  INFO  Generated: fonts/tooltip.4004ff.svg
  INFO  Generated: archives/2019/06/index.html
  INFO  Generated: img/default-skin.png
  INFO  Generated: archives/2019/index.html
  INFO  Generated: 2019/06/28/我的第一篇博客文章/index.html
  INFO  Generated: 2019/06/28/hello-world/index.html
  INFO  Generated: slider.e37972.js
  INFO  Generated: main.0cf68a.css
  INFO  Generated: main.0cf68a.js
  INFO  Generated: mobile.992cbe.js
  INFO  19 files generated in 241 ms
  sh-3.2# hexo s
  INFO  Start processing
  INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

• 重新部署到远端

  注意修改完后，需要重新在git上部署

  sh-3.2# hexo d

走过的坑

访问网站时，网站加载速度慢

打开Chrome的开发者工具，有2个URL超时，大概1.2min，拖慢速度的就是这两条！！

1. Request URL: https://fonts.googleapis.com/css?family=Source+Code+Pro

2. Request URL: http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

措施：

• 定位fonts.googleapis.com/css?family=Source+Code+Pro到blog/themes/landscape/layout/_partial/head.ejs

sudo vi /Users/xuxinghua/blog/themes/landscape/layout/_partial/head.ejs

将下面注释掉：

<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">

• 定位ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js到blog/themes/landscape/layout/_partial/after-footer.ejs

  sudo vi /Users/xuxinghua/blog/themes/landscape/layout/_partial/after-footer.ejs

  将

  <script src="//lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>

​ 改为

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

成功！