- About me
- About this website
- Technical details behind this website
Hi, I am XuRui Yan. My chinese name is 晏旭瑞. I once worked in Beijing as a Python developer aimed at high-performance web server. I received a Bachelor's degree in Computer Science and Technology from Beihang University and I am now pursuing my Msc in Informatics in the University of Edinburgh.
About this website
This is my personal website and blog where I write down my thoughts, technical experiences, solutions to problems and learning notes that I would like to share. All articles are original unless stated otherwise and every article takes me more than 10 hours.
Technical details behind this website
This is a static site generated by Pelican and hosted on bandwagonhost's VPS using NGINX.
Pelican is A Static Site Generator, Powered by Python. It is a command tool which roughly does the following 2 things:
- parse markdown or reStructuredText files that you write
- generate the HTML output from a specific theme using Jinja2 templates
There are many similar static site generators in other languages: StaticGen. I strongly recommended choosing one according to your preferred language and technical stack.
Rsync speedups deployment by just transfering the difference between two sets of files. There are 2 different ways to run rsync: using ssh directly or a rsync daemon. It's more convenient to transfer via ssh without the need to config a rsync server.
rsync -rvc -e 'ssh -p <port>' --delete output/ <user>@<ip>:/www/blog
- r, --recursive, copy directories recursively
- v, --verbose
- c, --checksum, check if the files have been changed by checksum instead of time of last modification. This is necessary since all files are generated in local at each build.
- e, --rsh, specify remote shell program and its options.
- delete, delete files on server side that are not on local side. Without this option, files that are deleted in local side will retain in server.
HTTPS is enabled with free certificate provided by Let's Encrypt.
In order to get a certificate from Let’s Encrypt, you need to use an ACME client. Certbot is officially recommended.
It helps to:
- verify control over the domain
- issue and deploy certificate
The drawback of Let's Encrypt is that it only lasts for 90 days.
You will receive email notification 20 days before the certificate expires.
We have to renew it manually:
0 1 * * 1 /root/certbot-auto renew >> auto-certbot.out 2>&1
Nginx might need to be reloaded before the new certificate becomes effective.
HTTPS also has some limitations:
- An address(ip:port) can only be used by a HTTPS domain
example.comneeds separate certificate even though the former is a subdomain of the latter. This problem can be solved by using wildcard or multi-domain certificate. Sometimes, the non-www certificate has already covered the www subdomain. Unfortunately, certbot doesn't support these 2 methods right now
- If a page includes HTTP resources, it will be considered unsecure and the green lock can not be seen in the browser
One of the advanced features provided by google search is to narrow your results by specifying the exact site or domain.
For example, if you want to search
flv in my site, you can search
flv site:https://www.yanxurui.cc in Google or redirect to
https://www.google.com/search?q=site:https://www.yanxurui.cc%20flv in a browser.
This is the magic behind the search box in the left sidebar of my site.
Google search console allows webmasters to control index and optimize visibility of their websites.
By submitting your sitemap, you will get to know
- which urls have been indexed successfully and which have been excluded
- when was a url last crawled
- daily clicks and top queries/pages in the Google search results
- which keywords leads to a page click(this is very important to the SEO)
- top linking pages from external sites
sitemap is usually a XML file including all the urls of your website that you want the search engine to index. Most importantly, it indicates when the page might update and the search engine need to reindex at a specific frequency.
What if you don't want a page to be indexed by Google?
- use 'noindex' tag
place the following meta tag into the
<head>section of your page:
<meta name="robots" content="noindex">
- use robots.txt
User-agent: * Disallow: /archives.html Disallow: /tags.html
Google analytics is a very powerful tool to track and report your website traffic.
First things first. How can this free service help us? It can tell you
- your daily or monthly active users
- which pages are most frequently visited?
- how you acquire your uses? by organic serach, direct or referral
...just to name a few
You must be eager to try and It's indeed very easy to use.
- Create a property which stands for your website under your account on the Analytics platform.
- Copy and paste the tracking code(gtag.js) as the first item into the of every webpage you want to track
The frontend design was initially done by Abdel Raoof Olakara for Jekyll and the theme is freely available on Github: olakara/JekyllMetro. I forked it and made a lot of modifications before applying to pelican.
A popular image gallery used to zoom and swipe images on both desktop and mobile devices. It works when you click or tap an image in any page.
This is a 500px-like justified image grid layout which can present images in their original aspect ratio without cropping.
Another common layout is Pinterest-like cascading/fluid grid layout also know as masonry style. Examples can be seen in Masonry, Metro, and Justify layout modes
CodeHilite adds hightlight for code blocks using Pygments. This extension is included in the standard Python Markdown library.
Let me explain it in a detailed way.
Like any Markdown interpreter, Python Markdown can convert
We need two steps to achieve highlighting:
1. set classes for different components in the code block
This is done by codehilite extension
This extension also enables us to specify the language.
The result of
<div class="codehilite"> <pre> <span></span><span class="k">print</span><span class="p">(</span><span class="s1">'hello'</span><span class="p">)</span> </pre> </div>
I prefer to fenced code block which is supported on GitHub so we still need
markdown.extensions.fenced_code to support this syntax.
pymdownx.superfencescan do the same thing.
2. import css rules to define styles for different classes
Pygments can generate CSS stylesheet of different themes for all CSS classes mentioned above.
Install Pygments library and run the following command:
pygmentize -S monokai -f html -a .highlight > styles.css
-Sspecify the theme to be used.
-asets CSS class name for the wrapper
<div>tag. Defaults to codehilite.
Then link this CSS file in the head of the HTML file.
use_pygments is turned off.