Recently I have been thinking about writing a personal homepage. After some research, I decided to use Jekyll to set up a homepage on Github Page. It took one and a half days to realize the basic functions of the website. The Semantic UI CSS framework was used in the construction process, and VUe.js was used for DOM operation. Welcome to visit: https://epplalee.github.io/

Here’s what I learned from the day and a half:

  • Liquid template engine Because Jekyll has this template engine built in, I decided to use it on the fly, but the documentation is really clear and detailed (but in English) and it’s very handy to use.
  • The sidebar on the left side of CSS3 animation web page (sidebar) uses the transition and animation features in CSS3 to complete the animation effect.
  • Media Query uses media query to achieve mobile optimization.

Potholes:

  • The resolution displayed by the mobile browser is larger than that of the device. I did not use the parameter device-width when I wrote the media query at the beginning, which resulted in the failure of mobile compatibility
@media (max-width: 768px){ settings... ; }Copy the code

Change to

@media (max-device-width: 768px){ settings... ; }Copy the code

After that, the optimizations on the mobile end should display normally.

Features to be improved:

  • Use viewPort to optimize the reading experience on mobile
  • Implement the search function (wait for more articles)