Pick the Astro template you want to use!
Step 1: Go to either repo and follow the instructions contained in the README within.
https://github.com/Developer-Student-Club-UoA/portfolio-website-template-two
OR
https://github.com/Developer-Student-Club-UoA/portfolio-website-template-one
Step 2: Create a fork of the repo
Step 3: Name your repo something fun!
Step 4: Give it a fun description
Step 5: Click on Create fork
Your fork should now look something like this:
Step 6: Nagivate to https://idx.google.com/
Step 7: Click on Import a repo
Step 8: Paste the URL of your fork into the dialog to import a Git Repo
Step 9: Click on Import
You should now see the dialog of it beginning to import
Once you get in, wait for it to set up. The terminal should end up looking like the following:
Step 10: Install the Astro extension for syntax highlighting for .astro files.
Step 11: Open up the terminal with Ctrl + ` .
- Run
npm ito install dependencies for the project
After the dependencies have been installed, run npm run dev.
You should see this in your terminal.
Click on the localhost:4321 link and it should open up a preview of the website.
From now, click on the template link, and follow the README contained within to customise the template. Come back here for deployment instructions :)
Step 1: Go to https://app.netlify.com/login
Step 2: Log in via your GitHub account
Step 3: Authorize Netlify
Step 4: Enter your details and click Continue to Deploy (if this is your first time)
Step 5: Click to deploy from GitHub
Step 6: Authorize
Step 7: Click on your account (ignore orgnaizations if you have any)
Step 8: Select to only use your new repository
Navigate and select your forked portfolio website like such:
Step 9: Install
Step 10: Click on your repository to deploy
Step 11: Ensure in build settings the following is enabled (optional)
Step 12: Finally, click deploy
You'll now see that your website is now deploying to Netlify.
Step 13: Visit site deploy
Once deployed, view the site deploy like such via the popup that shows
You should be taken to a similar webpage:
Step 14: View production deploy
You'll now be taken to a website where you can view your portfolio. You're now done! Your portfolio is live on the internet.
Step 15: (Optional) Change the subdomain to your own
If you want some customization, netlify gives you the ability to set a custom subdomain for your portfolio. Simply press the site name customization button
Go to change your site name
And enter your new site name
You should now see your new domain down the right hand side!
Success!
**Step 16: ** Extra for experts
If you have a custom domain name, from a domain provider like Namecheap/Cloudflare etc, you can follow the steps here to point it at Netlify!
You can further follow their guides to add HTTPS encryption to your new site
Success! You now have your own portfolio site deployed on the web
❤️