HOW TO BUILD YOUR WEBSITE FOR FREE
Preface
These days I have been researching how to build my own website for free. Now I record all of this here, hoping it can help you who want to build a website but don’t want to spend money.
Things You Need to Have
A computer with Internet access
Haven’t? Buy one!(bushi).Try do that in phone is really cool right?
A Github Accounts
Haven’t? Sign up! This is a guide.
A smart person –You
Start!
First,find your favorite theme template on GitHub
Generally speaking, just search for jekyll themes and select it. Here are some recommended templates, but the following operations will be explained using the template Chirpy used on this site as an example.
Of course, there are many more high-quality templates. Please go to GitHub to search.
Once you have chosen your template, click the Fork button to fork it to your account. It is recommended to name the new repository to yourname.github.io.Like this:
Make modifications to the repository you just created
Generally speaking, template providers will provide relevant tools and instructions. The following takes the Chirpy template as an example. The following is from the official Chirpy documentation
Create a your website
Sign in to GitHub to fork Chirpy, and then rename it to USERNAME.github.io
(USERNAME
means your username).
Next, clone the repository to your local machine, make sure it has nodejs installed, then go to the root directory of the repo and run the following command:
$ bash tools/init.sh
The above command will: Check out the code to the latest tag (to ensure the stability of your site: as the code for the default branch is under development). Remove non-essential sample files and take care of GitHub-related files. Build CSS/JS assets files and then make them tracked by Git. Automatically create a new commit to save the changes above.
Setting up
Update the variables of _config.yml {: .filepath} as needed. Some of them are typical options: url,avatar,timezone,lang
Social Contact Options
Social contact options are displayed at the bottom of the sidebar. You can turn on/off the specified contacts in file _data/contact.yml
.
Customizing Stylesheet
If you need to customize the stylesheet, copy the theme’s assets/css/jekyll-theme-chirpy.scss
to the same path on your Jekyll site, and then add the custom style at the end of it.
Starting with version 6.2.0
, if you want to overwrite the SASS variables defined in _sass/addon/variables.scss
, copy the main sass file _sass/main.scss
into the _sass
directory in your site’s source, then create a new file _sass/variables-hook.scss
and assign new value.
Manually Build and Deploy
On self-hosted servers, you cannot enjoy the convenience of GitHub Actions. Therefore, you should build the site on your local machine and then upload the site files to the server.
Use custom domain name
set you domain name
Get a domain name,and set DNS
There are many DNS resolution service providers that provide free services, such as DNS.HE.NET, Cloudflare, Domaincow.com ,etc. You can choose any one of them. The operations are similar. The following takes DNSExit as an example.
Enter the URL in the browser: https://dnsexit.com/index.jsp
Adding your domain name and set
Enter the IP address of the Github server
Click Next until the end
Click on the upper right corner to save DNS settings
By the way, you can add a record in the CNAME: www.example.cc = example.cc
Set your repository
On GitHub, set up your personal web page as GitHub Pages. In your repository, go to the “Settings” page, and in the “ GitHub Pages” section, select “Enforce HTTPS” and “Custom domain”. Then, paste your custom domain name into the “Custom domain” field. Click the “Save” button to save your settings.Like this: Create a new file called “CHAME” in your repository and write your domain name in it, like this:
Done
Wait for the changes to be applied, then enjoy your site. By the way, you can use https://dnschecker.org/ to check if your DNS settings are effective.