How to build your own website

Useful links

1. HEXO: 安装所需库可以看博客搭建过程采用hexo框架+部署到github + blinkfox/hexo-theme-matery
   Hexo+github搭建个人博客 + video guide。
2. 最简单的办法: HUGO NETLIFY；如果需要添加更多的功能可以看这里。
3. 如果想贴图片，可以参考这个知乎回答。由于不用Typora，因此使用的是第二个方法，即使用![](image.jpg)进行图片插入（缺点是会占用repo的存储且因为wall加载慢）。
4. 此个人网站的原网址为 MarcuXu.github.io ，但GitHub page也是可以绑定个人购买的域名。例如，新人在腾讯云购买域名是比较划算的。购买域名后，新人可以直接按照腾讯云的guidelines安装SSL证书以便于解析。如果你使用的是基于HEXO的GitHub page，那么你可以参考GitHub Pages个性化域名配置和github pages 绑定阿里云域名来进行后续的配置。

Bugs

1. IdealTree卡住
   • npm config set registry https://registry.npmmirror.com/
2. 用户名不一样导致的404
3. Git使用出现git@github.com: Permission denied (publickey)，得先设置好全局git config才可以用keygen
   • git config –global user.name “MXU”
   • git config –global user.email “user@gmail.com”
   • ssh-keygen -t rsa -C “user@gmail.com“
   • ssh -T git@github.com
4. 该网站使用的域名是在腾讯云上购买托管的，在申请SSL免费证书时会因为Github提供的CNAME记录值”username.github.io”中包含CAA记录，且改该域名CAA记录中不包含Sectigo根证书（TrustAsia签发的根证书）的授权，因此将导致腾讯云免费证书无法签发。具体解决措施可以参看这里

Cmd

• hexo clean / hexo cl （清理掉上次生成的缓存和静态输出，每次重新生成时最好第一个执行）
• hexo generate / hexo g （在clean后，用来generate新的静态网站）
• hexo server / hexo s （在执行generate后，用来在local预览）
• hexo deploy / hexo d （将生成后的静态网站发布到部署repo中，不是把配置文件本身push上去）
• hexo new file name
• npm run rebuild （等价于 hexo clean && hexo generate，只生成不启动server）
• npm run preview （等价于 hexo clean && hexo generate && hexo server，用于本地预览）
• hexo clean && hexo generate && hexo server （一键生成新的静态网站后在local打开）
• hexo clean && hexo generate && hexo deploy （一键生成新的静态网站后发布到repo，若不成功请检查network/proxy/SSH connectivity）

Notes

1. md内的标题最好从”##”开始，才会有目录。
2. 如果使用vscode开发，可以直接在 终端 执行命令而不需要在文件夹下 git bash。但是在vscode中，注意关闭自动注释插件，否则会与主题style产生冲突。
3. 更改字体的颜色，格式等可以参考这里。
4. 已安装表情插件，md使用表情包请参考这里😏
5. 在头部标明 categories: xxx 后 categories 才有作用。
6. 若是插入GIF可以参考这里，实际上可以将一些非敏感的图片上传到 https://giphy.com/ 后进行图床引用，格式类似 ![]()。本网站之后主要使用线上图床来附上图片（使用图床有多个优点，例如图片加载快，不需在本地和GitHub占用存储空间，所以非私密的图片完全可以upload）。
7. 注意upload到GitHub上的并非所有的文件，GitHub pages只需要 public 即可。其实这里可以稍微理解一下部署到github的原理。之前步骤中在Github上创建的那个特别的repo（MarcuXu.github.io）一个最大的特点就是其master中的html静态文件，可以通过http://MarcuXu.github.io来直接访问。Hexo -g会生成一个静态网站（第一次会生成一个public目录），它就是我们点开网站看到的东西。而当我们将hexo生成的静态网站git commit后，我们就可以在线上看到我们网站的内容了。所以明白了原理，怎么做自然就清晰了。
8. 关于在md文件中公式的话，可以将论文中的latex公式直接复制后左右各加 $ ，而更多的md文件中编辑公式可以看这里。
9. 2026 update: 目前这个网站还是以 Hexo 5.x + hexo-theme-matery 为基础维护，所以不要看到新的教程就直接升级 Hexo、Node 或主题依赖。现在更稳的办法是先看 _config.yml、themes/hexo-theme-matery/_config.yml 和 package.json，确认已有配置能不能解决问题。
10. 当前主域名是 https://marcuxu.com，source/CNAME 里也是 marcuxu.com。如果以后改域名，至少要一起检查 _config.yml 的 url、source/CNAME 和 GitHub Pages 的 custom domain。
11. 主题外观的个性化修改尽量集中放在 themes/hexo-theme-matery/source/css/my.css。现在里面主要做了蓝绿主色、文章阅读宽度、card阴影、图片和表格样式、公式横向滚动、TOC宽度、移动端文章信息栏，以及首页cover长标题在手机上的字号和行距适配。
12. 手机端要特别注意首页第一屏。根目录 _config.yml 里的 subtitle 比较长，如果沿用 Matery 默认的 4rem 标题字号，手机上会容易和top bar、按钮、social link挤在一起。因此这类问题优先用 my.css 做小范围覆盖，不要直接改主题模板。
13. 写论文解读或技术文章时，如果文章需要公式，就在front matter里加 mathjax: true；如果文章需要配图，就优先用同名资源文件夹，例如 source/_posts/TLV-CoRe-paper-explanation/tlv-core-mechanism.png，正文里直接写 ![TLV-CoRe mechanism](tlv-core-mechanism.png)。这样生成后的路径更清楚，也不需要到处找图床链接。
14. 现在内容侧已经有一些偏科研笔记的文章，例如 CNN/DL、PSMGD、TLV-CoRe 等。写这类文章时不要只贴结论，最好按“背景问题 -> 方法直觉 -> 关键公式 -> 图示 -> 实验takeaways -> limitation”的顺序展开，读者会更容易跟上。
15. 站点功能方面已经有站内搜索、Atom feed、GitHub emoji、拼音permalink、字数统计和Matery的一些文章/分类/标签页面。维护时如果只是改内容或样式，通常先 hexo clean && hexo generate 或 npm run rebuild 检查生成是否报错；需要看本地页面时用 npm run preview；只有确认要发布时再执行 hexo deploy。
16. 配置维护尽量小步进行。package.json 里只放已有Hexo工作流的脚本封装，不通过升级依赖来解决主题问题；空的临时配置文件可以清掉，但 public/、db.json 和 .deploy_git/ 都属于生成/部署状态，不要把它们当作正文源文件手工维护。

Insert images as HTML does

<!--2 images are inserted in same line-->
<div align="center">
<img src="left-image.jpg" alt="left example" width="30%" height="30%" align="bottom"/>
<img src="right-image.jpg" alt="right example" width="30%" height="30%" align="bottom"/>
<br> <!--换行-->
<span>The left is our page, and the right is the example page.</span>
</div>