This article was first published on my blog at syy11.cn.

The final result

PC:

Mobile client:

designed

As a Coder, what kind of personal homepage is the most suitable for me?

  • Have a personality
  • A static page
  • concise
  • Information is displayed on a single page
  • Show your profile, contact information and personal projects

As a front-end developer, I work with Object every day. As an Object, what kind of attributes will YiyangSun have?

const YiyangSun = {
  introduction: "Hi, there'll 👋! I'm Yiyang Sun. Currently student of UESTC. Frontend developer.".blog: "https://blog.syy11.cn/".github: "https://github.com/syy11cn/".twitter: "https://zhihu.com/people/syy11cn/".works: [{name: "hexo-theme-linear".repo: "https://github.com/syy11cn/hexo-theme-linear/"}, {name: "config-router".repo: "https://github.com/syy11cn/config-router/",}]};Copy the code

What if I put this code on the web?

Think of some Web IDE and blog code block style, it feels like a good idea.

If you want to deploy such a profile page?

Cloning of warehouse

First, clone my Github repository to your account.

Conveniently seek a ⭐ ~

Once the clone is complete, go to the syy11cn.github. IO repository in your account, go to Settings, and rename it to < your username >.github.

You can call it something else.

Modify your profile picture

Find/assets/images/favicon. Ico file and replace it with your avatar, please remember to take your avatar picture named favicon. The ico).

Modify theindex.html

in<head>Tags:

Click to expand the list below.

title

Modify the character in the title tag to change it to your nickname.

<title>Your nickname</title>
Copy the code

Google Site Verification

Change the value of Google-site-verification to the string you obtained from the Google Search Console.

Select in order: “Add Resource” – “URL prefix” – “Other authentication methods” – “HTML Tags”

<meta name="google-site-verification" content="The Google HTML tag string you got." />
Copy the code

This property is used for Google SEO.

itemprop

Modify the meta tags with itemProp name and Description and change the tag’s content value to your nickname and description.

<meta itemprop="name" content="Your nickname." />
<meta itemprop="image" content="/assets/images/favicon.ico" />
<meta itemprop="description" content="Your profile" />
Copy the code

This attribute is mainly used for QQ, wechat and other social platforms to grab the main content of links.

keywords & description

Change the value of the name attribute to keyword and description attribute of all meta tags. Change the value of the content attribute to the corresponding keyword and description. Keywords must be separated by commas.

<meta name="description" content="Your profile" />
<meta name="keywords" content="Please separate your keywords by commas." />
Copy the code

This attribute is primarily used for SEO, although today’s search engines don’t value these two tags very much.

in<body>Tags:

footer

Modify the Copyright notice in the

TAB. You can change the name of the Copyright to your nickname.

<footer>
  &copy;Year your nickname</footer>
Copy the code

This information is displayed at the bottom of the page.

Custom domain name (optional)

If you need to customize the domain name, open the /CNAME file and change the domain name to yours.

Then add a CNAME resolution to your domain name from your DNS provider, with the value of your Github username. Github. IO.

Of course, you can leave out the custom domain name and use your Github username.github. IO to access your homepage later.

Modify the page display information

The code block displayed on the page is actually a string stored in /assets/js/source.js.

const source = '\' \ '\' javascript const YiyangSun = {Introduction: "Hi, there 👋! I'm Yiyang Sun. Currently student of UESTC. Frontend developer.", blog: "https://blog.syy11.cn/", github: "https://github.com/syy11cn/", twitter: "https://zhihu.com/people/syy11cn/", works: [ { name: "hexo-theme-linear", repo: "https://github.com/syy11cn/hexo-theme-linear/", }, { name: "config-router", repo: "https://github.com/syy11cn/config-router/", }, ], }; \ ` \ ` \ ` `;
Copy the code

The only thing you need to change is the language on the second line and the const declaration section.

Do not modify the source variable name or output with escape characters.

Push the repository and start Github Pages

Finally, push local changes to the Github repository and configure the correct Github Pages Settings for the repository.

Github. IO, or your custom domain name.

More and more

Currently code highlighting only supports javascript. Lack of support for other languages.

If you need to update the code highlighting, you can Issue or contact me directly.

If you also want to have such a personalized homepage, no coding, just simple configuration, don’t be afraid of trouble, quickly deploy ~

Finally or humble request ⭐ ~ warehouse address: github.com/syy11cn/syy…