WHAT YOU ARE MAKING HERE
A personal website, without coding. The process is like building a house. Here are the basic components:
- Hosting: The Server where the website runs and where all your files live (the land).
- Domain: The Web Address that points people to the server (the address, literally).
- Free Website Software: We will use WordPress.org to build the site (the blueprint and tools), which has free/premium–
- Themes: Controls your site’s overall look (like floor plans, overall looks).
- Elementor + Starter Templates: Gives you ready-made pages and drag-and-drop editing inside that theme–they sit on top of the theme, but CAN override its looks (like furnitures, rooms).
- Plugins: Adds extra features to make building easier/final product better (like smart gadgets).
- * Note: WordPress.org is different from wordpress.com. The latter is a package deal that contains hosting, domain, and a pre-installed WordPress software. BUT you are limited in what themes/plugins you can use unless you pay for higher-tier plans, and it can get very expensive for a simple personal website/portfolio.
THE PLAN
STEP 1: Buy Hosting
There are many options–I was choosing between Bluehost, Hostinger, and Vercel–we will use Hostinger here. You can choose either the Premium or Business plan–we will go with Business here (for a bit more $$, your site is faster, gets more storage, has more frequent backups, has better hosting, and scales traffic better). Then, pick a term. The longer the term is, the cheaper it is per month, so many people go with the 48 months plan, but pick whatever length suits you the most.
At some point before checking out, you will be asked to create an account. Either use Google or create an account that you want your hosting/website to be linked to (when making a WordPress account later, you can use the same login). Afterwards, be sure to verify your email in the link that Hostinger sends you.
Before paying, perhaps find a Youtuber’s discount code to get an extra % off.
STEP 2: Register a Domain
Once your Hostinger account is created, you can claim your free domain from the Home page of your dashboard. By typing in the search bar, you can check whether the name is available–usually domains ending in .com are recommended. The first year should be free, so claim the domain if it’s available, unless you want to bid on the unavailable ones. You might be asked to fill in registrant contact details–you can do so to finish the registration.
Be sure to verify your domain email (via an email link). Wait for domain to show Active on your dashboard.
STEP 3: Install WordPress–Get Theme + Plugins
Through Hostinger, create a website using WordPress. If you haven’t created a WordPress account yet, create one, preferably using the same login as Hostinger.
Create a blank site, and select your domain. Choose a server location near your target audience (Business plan uses CDN, a globally distributed network of servers that copies your content to users around the world, so the location you pick matters less under this plan).
Finish the set up–WordPress installs. To log in, you can either:
(1) Go to Hostinger Dashboard –> Website –> Website List –> Click on WP Admin for your website, OR (2) visit yourdomain.com/wp-admin –> enter the WP credentials you set.
Now that you are in WordPress, we can install and activate a theme and add helpful plugins.
6) Install a theme (Astra) & essential plugins
- In WP Dashboard: Appearance → Themes → Add New → search Astra → Install → Activate.
- Plugins → Add New → search Starter Templates (by Astra) → Install → Activate.
- Optional: deactivate/delete Hostinger onboarding plugins you don’t need while building.
- Optional: deactivate LiteSpeed Cache during editing; re-enable when done for speed.
7) Import a ready-made website (Starter Templates)
- Go to Appearance → Starter Templates (or a “Get Started” button).
- Choose Elementor as the builder.
- Browse categories or search (e.g., “portfolio,” “restaurant”).
- Pick a free template (or premium if you have it).
- Optionally set logo, fonts, colors → Continue → Build my website.
- After import, click View Website to see your live site.
8) Customize pages with Elementor
Two ways to open a page in Elementor:
- From the front-end admin bar: Edit with Elementor, or
- Pages → (hover a page) → Edit with Elementor.
Edit basics:
- Click any text → edit in the left panel (or double-click text on canvas).
- Click Buttons → change text + add a Link (pick an internal page by typing its name).
- Click Image → Choose Image → upload/select.
- Add elements: top-left “+” → drag Heading, Text, Image, etc.
- Delete: right-click element/container → Delete.
- Publish/Update to save changes.
Understand structure:
Pages are built with Containers/Columns → Elements (Headings, Text, Buttons, Images).
9) Add a new page
- While logged in, use top bar + New → Page.
- Name it (e.g., “Our Team”) → Publish.
- Click Edit with Elementor → add content.
- You can also import Blocks or whole Pages from the Starter Templates library:
- Click the Starter Templates (S) icon) → Blocks (for sections) or Pages (full pages) → Import.
10) Add the page to your menu (navigation)
- Front-end top bar Customize (or Dashboard: Appearance → Customize).
- Menus → Main Menu → Add Items → select your new page → Publish.
11) Edit site header & footer
- Customize mode → click pen icons over header or footer areas.
- Change logo, contact info, social icons, footer text, etc. → Publish.
12) Speed & housekeeping tips
- Server location: pick closest to your audience.
- CDN (Business plan): speeds up global visitors.
- Cache: re-enable LiteSpeed Cache after building for performance.
- Permalinks: set to Post name (Dashboard → Settings → Permalinks).
- Backups: use Hostinger or a plugin (e.g., UpdraftPlus).
- Security: install a basic security plugin later (e.g., Wordfence).
13) Optional: Blog/Posts vs Pages
- Pages = static content (About, Contact).
- Posts = articles/blog; can be organized by Categories/Tags.
- To hide dates/authors on posts, you can add CSS in Customize → Additional CSS:
.entry-meta, .post-meta, .entry-footer, .byline, .posted-on, .cat-links, .tags-links { display: none !important; }
Quick Troubleshooting
- Can’t find “Edit with Elementor”: ensure the page was created/imported for Elementor (some templates use Gutenberg; you can recreate with an Elementor template).
- Template didn’t import: re-run Starter Templates, or ensure needed companion plugins auto-installed.
- Changes not visible: clear browser cache; if using LiteSpeed, Purge All; check in an incognito window.