建站备忘录_1

Posted on 2021-06-07 Edited on 2021-10-05 In CS

Hexo的安装，NexT主题配置

OS: Ubuntu

下载必要的 packages 以及更新版本

sudo apt-get install git-core
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm install -g n
sudo n stable  ## upgrade
sudo node -v   ## version check

安装Hexo

1	sudo npm install -g hexo-cli # -g means global

测试Hexo

hexo init ./Blog
cd   ./Blog
hexo new test
hexo g          # generate
hexo s -p 80    # Start the server, on port 80

在当前文件下新建名为‘Blog’的Hexo网站根目录，然后新建一个页面（'test'）, 页面生成以及启动服务后，在浏览器地址栏中输入 localhost:80 即可查看页面。

其他一些可能会使用到的命令

1
2
3

npm update hexo -g   # Update your Hexo
hexo d # == hexo deploy
hexo clean # Cleans the cache file (db.json) and generated files (public)

安装 NexT 主题 & 启用

进入网站根目录

1 2	cd ./Blog git clone https://github.com/next-theme/hexo-theme-next.git themes/NexT # v8.4.0

打开位于网站根目录的站点配置文件 _config.yml ，将theme 字段的值更改为 NexT以启用 NexT 主题

1	theme: next

个性化配置：LaTeX

修改主题的mathjax.js

由于需要经常输入公式，用LaTeX会方便一些，但毕竟是嵌入在Markdown内部的，有些时候语法存在冲突，也不可能实现LaTex全部的功能，但至少可以使用基本的数学物理公式，NexT主题自带了MathJax插件，为了使用 physics package，需要在其mathjax.js 添加两句载入命令，其他可参考MathJax的官网。

vim /PathToTheBlogRoot/themes/NexT/source/js/third-party/math/mathjax.js

'''
window.MathJax = {
  loader: {load: ['[tex]/physics']},
  tex: {packages: {'[+]': ['physics']}}
};
'''

修改后的mathjax.js如下

/* global NexT, CONFIG, MathJax */

document.addEventListener('page:loaded', () => {
  if (!CONFIG.enableMath) return;

  if (typeof MathJax === 'undefined') {
    window.MathJax = {
      loader: {load: ['[tex]/physics']},
      tex: {
        inlineMath: {'[+]': [['$', '$']]},
        tags      : CONFIG.mathjax.tags ,
        packages  : {'[+]': ['physics']}
      },
      options: {
        renderActions: {
          insertedScript: [200, () => {
            document.querySelectorAll('mjx-container').forEach(node => {
              const target = node.parentNode;
              if (target.nodeName.toLowerCase() === 'li') {
                target.parentNode.classList.add('has-jax');
              }
            });
          }, '', false]
        }
      }
    };

    NexT.utils.getScript(CONFIG.mathjax.js, {
      attributes: {
        defer: true
      }
    });
  } else {
    MathJax.startup.document.state(0);
    MathJax.typesetClear();
    MathJax.texReset();
    MathJax.typeset();
  }
});

需要留意，在上述文件中如果在原始值之后定义一个新的值（e.g. window.MathJax），则新值会覆盖原始值，而非添加，所以需要载入命令需要写在一个值内部。

p.s. 当然也有其他比较麻烦的方法，i.e. 在每个网页md文件的开始加入定义

{
<script>
MathJax = {
  loader: {
    load: ['[tex]/physics']
  },
  tex: {
    packages: {'[+]': ['physics']}
  }
};
</script>
<script id="MathJax-script" async
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
}

修改配置文件

1	vim /PathToTheBlogRoot/_config.yml

打开站点配置文件后，添加以下语句，启用mathjax

1 2	Plugins: hexo-renderer-mathjax

修改主题配置文件，将标签 math: 下的值修改为如下，以启用mathjax

vim /PathToTheBlogRoot/themes/NexT/_config.yml

'''
  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: ams

  katex:
    enable: false
'''

安装新的编译器

首先需要卸载原始的文本编译器，以及卸载可能存在的hexo-math插件（已有mathjax，所以不需要），随后安装 pandoc(version >= 2.0)以及其所对应的Hexo插件。

## Download pandoc
wget https://github.com/jgm/pandoc/releases/download/2.13/pandoc-2.13-linux-amd64.tar.gz
tar -zxvf pandoc-2.13-linux-amd64.tar.gz
echo "export PATH=$PATH:/ThePathTo/pandoc-2.13/bin"  >> ~/.bashrc 
source ~/.bashrc  # To tell the system where the pandoc is

## Switch the compiler
cd /PathToTheBlogRoot
npm uninstall hexo-renderer-marked --save  # Uninstall the default compiler
npm install hexo-renderer-pandoc --save    # 
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save   # NexT should already download it

为文章开启Mathjax渲染

在需要使用公式的网页.md文件的Front-matter中添加语句（mathjax: true）以开启Mathjax渲染，e.g.

---
title: 
date:  
mathjax: true
---

个性化配置：网页外观自定义CSS文件

自定义网页的透明度以及

1 2	mkdir /PathToTheBlogRoot/source/_data # Creat the Data Files Folder touch /PathToTheBlogRoot/source/_data/styles.styl # self-defined CSS file to set up parameters (e.g. transparency)

在 styles.styl 可以加入

// Custom styles.
// Overall background settings
body {
  background:url(/images/background.jpg);// Set the background image, images are also in the source folder
  background-repeat: no-repeat;// Set the background image non-repeated filling
    background-attachment:fixed;// Set the background image not to scroll with the page
    background-position:50% 50%;// Set the background image position
  background-size:  cover// Set to maintain the aspect ratio of the image and scale the image to the smallest size that will completely cover the background positioning area
  //opacity: 0.5
  //z-index: -1
}


//.main-inner{
  // opacity: 0.99;
// }


// page header style attributes
.header-inner {
     // You can also define the background color at the same time
  // background: #ddd 
     // transparency
    // opacity: 0.5;
    // z-index: 10;
}

// sidebar side toolbar style attributes
.sidebar{
         // Animation transition time
  transition-duration: 0.4s;
         // transparency
  opacity: 0.8
}

// Title style
.posts-expand .post-title-link {
   // Set font color
  color: #222;
}

// Article section style
.post-block {
    //background: var(--content-bg-color);
  background: #fff
  opacity: 0.95
    border-radius: initial;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    padding: 40px;
}



// Picture Table Style
.ImageTab{
    border-style:dashed; 
    border-width:0px;
    background-color:#FFFFFF;
}

.ImageTr{
    border-style:dashed; 
    border-width:0px;
    background-color:#FFFFFF;
}

.ImageTd{
    border-style:dashed; 
    border-width:0px;
    background-color:#FFFFFF;
}

一些可能会用到的命令

lsof -i:端口号  #查看端口
netstat -aptn  #查看所有开放端口

## 开启80端口
sudo iptables -I INPUT 6 -m state --state NEW -p tcp --dport 80 -j ACCEPT
sudo netfilter-persistent save