Building a personal website from start to finish – YUDIAN ZHU – Medium

  • Recently, I built a personal website and would like to share the steps here for reference.These are the steps I take:1.
  • Visual Tools like CyberDuck and FileZilla helps you to drag files directly to the server which is quite convenient.
  • After we finish it we can polish it again and again.The following are sketches I draw for website design.
  • I chose create-react-app to construct.Following the guide of create-react-app and split the different parts of my website.Filling in contentsPut up the introduction of your wbesite and show the viewer what this website is all aboutDeploy to serverrun the commandnpm run buildupload the build files to the server.
  • The server will look for the index file and show it on the website.Polish the websiteConsider that your website is not perfect enough?

Web beginners are usually quite confused where to start to build a website. Recently, I built a personal website and would like to share the steps here for reference. These are the steps I take:
1…

@ReactDOM: Building a personal website from start to finish #javascript #webdeveloper #react…

Web beginners are usually quite confused where to start to build a website. Recently, I built a personal website and would like to share the steps here for reference.

These are the steps I take:

1. purchase a domain

2. purchase a server and get connected

3. design the structure of website

4. start coding

5. fill in the contents

6. deploy to server!

7. polish the website again and again

The purchasing of a domain and server

There are so many web hosting suppliers like AWS, Aliyun. And I chose HostGator for domain and server one-stop solution. 

It helps you to do the DNS resolution which I would try to do it myself later on.

Get connected to the server and upload files

FTP and ssh are two main ways to get connected to the server and upload files. Visual Tools like CyberDuck and FileZilla helps you to drag files directly to the server which is quite convenient. And you can also use command line to finish this step that sounds more like a software developer. I use CyberDuck. I need to specify the port when I use ssh.

It runs like:

ssh -p 2222 username@ip_address

Design the structure of the website

Many people get stuck in this step because they want to make it perfect. According to my experience, to get things done we need to keep it simple from the beginning. We keep the most necessary parts and simple structure. After we finish it we can polish it again and again.

The following are sketches I draw for website design. (I am not a web designer so I followed others’ course to draw these sketches)

Start coding

At this step, we can just create an index.html and start to put up html and css. 

However, to make it more flexible and modernized. I chose create-react-app to construct.

Following the guide of create-react-app and split the different parts of my website.

Filling in contents

Put up the introduction of your wbesite and show the viewer what this website is all about

Deploy to server

run the command

upload the build files to the server. The server will look for the index file and show it on the website.

Polish the website

Consider that your website is not perfect enough? It doesn’t matter, modify it as long as new ideas come up!

Building a website is like when I wrote my first passage. We need to make it out first and then make it better.

Building a personal website from start to finish – YUDIAN ZHU – Medium