Websites 2024 consolidation
It all started few years ago with my own travel blog.
My Travel Adventures
Photo Gallery BlogI got the domain at PorkBun and changed the NameServer to Cloudflare ones.
Log into porkbun -> NS -> Change Authoritative Name Server to the ones provided by CF:
# curitiba.ns.porkbun.com
# fortaleza.ns.porkbun.com
# maceio.ns.porkbun.com
# salvador.ns.porkbun.com
After it syncs, you will be able to go to Workers & Pages -> Custom Domains and have the website ready/
Photo Galleries
As described here - https://jalcocert.github.io/JAlcocerT/creating-photo-centric-blog-with-hugo/
Later on, my first business website followed.
My Travel Adventures
Punto Photo GalleryAnd then I saw people close to me, who needed help.
But what can you do when there are many unknown unknowns?
Maybe…Clarify with an AI Powered Presentation
Custom Websites
Then…started customizing websites:
Content Creator Blog
Health Care Site
Real Estate Official Site
Scale Modelling Blog
Personal Business Landing
Travel Adict Photo Gallery
All your Links
Doctor ConsultationAll powered by HUGO & Astro 📌
- https://github.com/JAlcocerT/cozyknittingclub-web
- https://github.com/JAlcocerT/morita-web
- https://github.com/JAlcocerT/ScrewFastMoiRealEstate
- https://jalcocert.github.io/JAlcocerT/wordpress-migration-to-ssg/
- https://github.com/JAlcocerT/ira-web
- https://github.com/JAlcocerT/agutek-portfolioweb
- https://github.com/JAlcocerT/Portfolio
npm run dev
#hugo server
hugo server --bind="0.0.0.0" --baseURL="http://192.168.0.171" --port=1319The baseURL if you are doing dev in a server
For production, always check for HUGO the hugo.toml file and tweak the baseURL parameter
See also:
- For CSS:
/assets/css/custom.cssto tweak the light/dark themes colors.
You can choose the default for each folder by adding:
params:
theme: light #dark ##ffffff #dee2e6Which references: --surface-1-light: #ffffffb2;
- For favicons, i have used: https://github.com/ruisaraiva19/favycon
The theme automatically created public/images/favicon.png
Which it is referenced at layouts/partial/head.html
<link rel="icon" type="image/svg+xml" href="{{ "images/favicon.svg" | relURL }}" />
<link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ "images/apple-touch-icon.png" | relURL }}" />To use the favicons generated by favycon I needed to add the generated to public/images and make the proper reference with the html tags provided in the readme.txt at the head.html
Images is referencing to
public/images
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon-192x192.png">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicon-144x144.png">
<meta name="msapplication-config" content="images/browserconfig.xml">Next Steps
Making a better LinkTree or linkbio
At the moment of writing, they are charging 5$/m for the first paid tier.
It goes to 9$/m to have newsletter and web analytics…or customize the UI.
- Helping local places get a better website - https://menu.cocolounge.pl/
Themes To Try
Scaling Ideas
These are some ideas of whats coming next.
Making websites 1 by 1 its kind of slow.
But there are very well known services that provide interesting service without human interaction.
- Examples, this artist profile and this awsome designer profile
- And somethin’ like:
Weddings…
bodas.net
Automatic Invoices
- With Stripe as payment gateway, they create the invoices for your product/services automatically
- There are some project to create invoices with open software - Serverless Invoices worked great for me!
ServerLess-Invoices Setup 🚀
Create and manage invoices in your browser. Serverless Invoices is a free invoicing tool for freelancers and small businesses.
Made with Vue.js.
git clone https://github.com/mokuappio/serverless-invoices.git
#https://github.com/JAlcocerT/serverless-invoices
cd serverless-invoices
#rm -rf .git
docker build . -t mokuappio/serverless-invoices
#docker run -p 89:8080 -d --rm mokuappio/serverless-invoices
docker run -p 89:8080 -d --rm --name serverlessinvoices mokuappio/serverless-invoicesThere is an awsome Dockerfile example on how to bundle a Node App for Production
You can print to pdf, add your logo, taxes, CSS…
…and import/export the json with all your created invoices
- Or use their Saas: https://app.mokuapp.io/login
Menu websites at ~500 eur/year
Hosting Costs:
- https://banahosting.com/web-hosting ~5eur/month
- https://webtolearn.pl/cennik ~20eur/month
Customer management systems
Custom websites
More competitors
- Taplink
- bento.me
- https://getallmylinks.com/
- https://subscribepage.io/listy#