About

About me

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

Pelican is A Static Site Generator, Powered by Python. It is a command tool which roughly does the following 2 things:

  1. parse markdown or reStructuredText files that you write
  2. 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.

Deploy

HTTPS

HTTPS is enabled with free certificate provided by Let's Encrypt.

certbot

In order to get a certificate from Let’s Encrypt, you need to use an ACME client. Certbot is officially recommended.

It helps to:

  1. verify control over the domain
  2. issue and deploy certificate

renew

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:

./certbot-auto renew
or use crontab to do it automatically:
0 1 * * 1 /root/certbot-auto renew >> auto-certbot.out 2>&1
It renews at 1 o'clock every Monday(it won't do anything until your certificates are due for renewal or revoked)

Nginx might need to be reloaded before the new certificate becomes effective.

limitation

HTTPS also has some limitations:

  • An address(ip:port) can only be used by a HTTPS domain
  • www.example.com and example.com needs 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

Google

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.

Search Console

Google search console allows webmasters to control index and optimize visibility of their websites.

By submitting your sitemap, you will get to know

  • Converage
    • which urls have been indexed successfully and which have been excluded
    • when was a url last crawled
  • Performance
    • 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)
  • Links
    • 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?

  1. use 'noindex' tag place the following meta tag into the <head> section of your page:
    <meta name="robots" content="noindex">
    
  2. use robots.txt
    User-agent: *
    Disallow: /archives.html
    Disallow: /tags.html
    

Analytics

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.

  1. Create a property which stands for your website under your account on the Analytics platform.
  2. Copy and paste the tracking code(gtag.js) as the first item into the of every webpage you want to track

Theme

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.

Image Library

PhotoSwipe

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

Code Highlight

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

    print('hello')
into
<pre><code>print('hello')</code></pre>

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

    :::python
    print('hello')
is
<div class="codehilite">
    <pre>
        <span></span><span class="k">print</span><span class="p">(</span><span class="s1">&#39;hello&#39;</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.

markdown.markdownFromFile('test.md', extensions=['markdown.extensions.fenced_code'])
The third party extensions pymdownx.highlight plus pymdownx.superfences can 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

  • -S specify the theme to be used.
  • -a sets CSS class name for the wrapper <div> tag. Defaults to codehilite.

Then link this CSS file in the head of the HTML file.

Code highlighting can also be done by JavaScript highlighters such as highlight.js instead of CSS stylesheet produced by Pygments. Codehilite will generate HTML snippet like below if use_pygments is turned off.

<pre><code class="python">print('hello')</code></pre>


qq email facebook github
© 2018 - 晏旭瑞. All rights reserved
Built using pelican