本文讲解如何搭建、美化我们的Hexo博客

一、注册一个账号

  • 进入https://www.github.com ,然后注册一个账号。
  • 首页右上角头像那里有一个“+”号,点击后选择“New repositor”。
    注册github
  • 创建完之后点击“Settings”并找到“GitHub Pages”一栏,可以从后往前找。
    修改仓库信息
  • 看上面那个图,有个“Choose a theme”点进去,随便选个自己喜欢的主题。
  • 这些做完之后保存,刷新,等待一会儿(10min差不多,别指望立马就能看到),在地址栏输入: username.github.io (username为你注册时候写的名字,即你的用户名)即可看到你的博客。当然,你还不能对它进行编辑。

二、搭建Hexo

  • 下载并安装2个软件:Node.js(下载)和Git(下载),一路next即可。Node.js的安装可以参考这篇文章

  • 在你想安装Hexo的地方新建一个文件夹,然后右键单击,点击“Git Bash Here”(因为安装的软件版本不同和操作系统不同,这里出现的字可能会有些差异,只要大体符合即可)。注意本文中的所有Git命令都是在这个前提下进行的,不要搞到其他文件夹了。

  • 输入以下代码:

    1
    2
    3
    4
    5
    npm install hexo-cli -g
    hexo init
    npm install
    hexo g
    hexo s
  • 所有操作成功完成后,地址栏输入: http://localhost:4000 即可查看了。hexo的详细语法点这里

  • 如果想换个主题,输入以下代码(以安装yilia主题为示例,更多主题点

    1
    2
    3
    4
    5
    6
    7
    hexo clean #如果是安装第2个主题就不要写这句
    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
    #现在找到_config.yml中的theme属性,改成yilia
    cd themes/yilia
    git pull
    hexo g
    hexo s

三、将Hexo部署到Github

  • 找到根目录下一个叫“_config.yml ”的东东并打开它,翻到最后,添加以下代码并保存。

    1
    2
    3
    4
    deploy:
    type: git #到"type"都是原来有的,添加后面的即可
    repo: git@github.com:name/name.github.io.git #这里的"name"填你自己的
    branch: master
  • 在Git Bash输入以下代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    npm install hexo-deployer-git --save
    cd ~/.ssh
    ls #此时会显示一些文件
    mkdir key_backup
    cp id_rsa* key_backup
    rm id_rsa* #以上三步为备份和移除原来的SSH key设置
    ssh-keygen -t rsa -C "邮件地址@youremail.com" #生成新的key文件,邮箱地址填你的Github地址
    #Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好,当然也可以输入自己喜欢的名字>
    #接下来会让你输入密码,然后会确认一遍,如果是Linux可能是隐形字
    #上面的操作都成功之后会出现一个图,画的很拙劣,是表示OK了
  • 进入Github首页,右上角头像旁边有个三角形,打开,里面有个“Settings”,点击“SSH and GPG keys”,再点击“New SSH key”。

  • 打开 C:\Users\用户名.ssh id_rsa.pub

  • 将上面打开的文件全部复制下来,粘贴到Github

添加SSH-Key

  • 测试下是否成功连接(最好先等10min),输入指令:

    1
    ssh -T git@github.com
  • 让你输入yes/no,显然输入yes咯。

  • 提示你设置账号和密码,输入以下代码:

    1
    2
    git config --global user.name "balabala" #自己的名字,不一定非要是用户名
    git config --global user.email "mail@mail.com" #github注册使用的邮箱
  • 如果这些输入完之后提示了“Welcome”之类的话,恭喜你,你已经成功了95%!如果提示错误了,请根据提示自行百度。

  • 输入指令:

    1
    hexo d

  • 然后等待10min~2hour不等,访问:https://yourname.github.io (yourname自己修改)即可发现自己的博客可以访问了!

四、如何更新博客

  • 有一个非常优秀的在线Markdown编辑工具:Prose,可以用Github登陆并在线添加文件。

  • 也可以下载一个叫Typora的软件,本地写好之后传上去。

  • 博主目前用的是Atom

  • 更新完之后,输入以下代码即可。

    1
    2
    hexo g
    hexo d

五、如何使博客支持LaTeX

  • 安装Kramed

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  • 打开/node_modules/hexo-renderer-kramed/lib/renderer.js,找到函数function formatText(text),将其改成以下代码(可以把原来的注释掉):

    1
    2
    3
    function formatText(text) {
    return text;
    }
  • 安装mathjax

    1
    2
    npm uninstall hexo-math --save
    npm install hexo-renderer-mathjax --save
  • 打开node_modules/hexo-renderer-mathjax/mathjax.html,将原来的script注释掉,改成这个:

    1
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  • 打开node_modules\kramed\lib\rules\inline.js,改2个地方:

    1
    2
    3
    4
    原:escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    现:escape: /^\\([`*\[\]()# +\-.!_>])/,
    原:em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    现:em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  • 打开themes/yilia/config.yml(这里将yilia自行改成自己用的主题)添加或修改代码:

    1
    mathjax: true

  • 写新博客的时候加上一句“mathjax: true”,例如:

    1
    2
    3
    4
    title: 导数:你的能量,超乎你的想象!
    date: -2333-2-31 23:59:60
    tags: [jrx is a caiji]
    mathjax: true

六、如何加入来必力评论

  • 注册一个账号:打开官网: https://www.livere.com/ 注册账号即可。它会朝你邮箱里发送验证码,没写验证码之前千万别关掉那个韩文的弹出窗口。
  • 安装City版,如下图:

    • 复制“一般网页”中的代码,并记录下第二行出现的uid。
    • 在主题的配置文件_config.yml中输入以下代码(如果已经有了就修改即可)

      1
      2
      3
      livere:
      on: true
      livere_uid: xxxxx(把uid放上去)
    • 打开D:\Program Files\Hexo\themes\miho\layout_partial\plugins\comments(不同主题的话对应路径可能不一样),修改或新建文件livere.ejs,把“一般网页”中的代码复制进去。

  • 在来必力官网里自己调整个人喜好吧

七、如何加入看板娘

  • 我个人不是很喜欢这个功能,所以后来就关闭了,不过我在下面给出了效果图

  • 打开Git,输入指令

    1
    npm install --save hexo-helper-live2d

  • 向根目录或者当前主题下的_config.yml添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    model:
    use: live2d-widget-model-wanko
    display:
    position: right
    width: 150
    height: 300
    mobile:
    show: true
  • 等待一会,刷新页面,就可以看到了

  • 当然各位可以更换自己喜欢的model,所有的model可以点这里

八、如何在文章里加入pdf

  • 打开Git,输入指令

    1
    npm install --save hexo-pdf

  • 如果要引用外部pdf,在文章里加入

    1
    {% pdf https://balabala %}
  • 如果要引用本地pdf,在文章里加入

    1
    {% pdf ./pdf名字.pdf %}

九、如何更改主题

  • 打开Hexo主题官网,挑个自己喜欢的

  • 点击该主题的Demo,会找到其在Github上的地址,将这个地址复制下来

  • 打开Git,输入指令hexo clone https://balabala,网址自己填写

  • 打开Hexo根目录下的_config.yml,将theme改掉。注意主题名字和theme:之间还有一个空格!

  • 重新打开博客即可

  • 可以对主题进行魔改,使其更适合自己的审美

十、如何添加鼠标点击的效果以及其他特效

  • 这些东西就是每个主题独有的了,并没有什么通用的方法

  • 关于Next主题的特效应该比较常见,可以自行百度,由于博主用的不是NexT主题所以不说了,可以参考这篇

最后更新: 2019年03月28日 17:10

原始链接: https://ruixiangjiang.github.io/2018/11/06/startgit/

× 请我吃糖~
打赏二维码