This landing page should be easily managed for updating content and also have multiple pages. What stack would you use for this today?
I want it to be SEO optimized.
I use Vue for the app but feels overkill for the landing page and also not ideal in terms of SEO. I don't feel like going the SPA+SSR way either.
Is wordpress still a good alternative?
Or maybe just a html+jquery site hosted at for example Firebase?
I don't expect to update it too much with news etc so a CMS is not required.
What would you do?
- easy SEO optimization, especially compared to SPA
- easy content management, GitOps
- fast, scales well
- free to host via various services (e.g. GitLab and GitHub)
You might enjoy my blog post on how I host my personal website for free with Hugo and GitLab Pages: https://tkainrad.dev/posts/using-hugo-gitlab-pages-and-cloud...
We are using Zola for two static sites.
This[0] is the issue that broke lots of themes. The fix was certainly an easy and small one but still a breaking change, and not the only one, in a minor version change; that should have been a major version change, if you want to use semver[1] as a convention you must respect it.
[0]: https://github.com/gohugoio/hugoThemes/issues/682 [1]: https://semver.org/
I host my hugo sites on Azure Blob Storage for few cents (literally) per month.
If you're not well versed with using Wordpress (like me) than there's 2 routes you can take:
Developer route: Use a static site generator. (not meant to be exhaustive)
- Gatsby: if you know React
- Hugo
- Jekyll: ruby
- simple HTML + CSS static website
Non Dev route: If you're not a developer, you could use one of the following paid tools:
- clickfunnels
- hubspot
- mailchimp
- leadpages
- unbounce
- and many more
If you're using a static site generator, it's really easy to host it on AWS Amplify Console for free.
Disclaimer: not associated with any of the above listing products
You have nice static HTML pages with a CDN, super fast, and there's even a CMS option with NetlifyCMS, which works by creating git commits for you and then automatically pushes the new static version on Netlify. The basics in Netlify are free and there are nice add-ons where some are also free (e.g. forms).
Check out the template list here: https://templates.netlify.com
The structure was something like this:
- index.php
- header.php
- sidebar.php
- footer.php
- page-1.php
- page-2.php
...
All my HTML is held in template .html files, with %%PLACEHOLDER%% text where the dynamic content should be, Then my index.php is the main 'app' loading in the templates to build the output, doing string replaces on the html, and then a single final 'echo' to send the result to the user at the end of the process.
I think this is called 'code behind' - I've just always had a problem with mixing code and layout in the same file.
Does anyone else do it like this?
If the objective of a landing page is to reach the largest audience possible in a sustainable, fast and efficient way, I wouldn't choose any SPA solution. And I must add that this comes from experience. For few years I did try to go the SPA way, with server side rendering, but the extra work and overheads are just not worth it.
IMHO, nothing beats static pages for landings.
I dunno. This means you're excluding people who disable JS from your audience. I'm going to stick out my neck a suggest that they're probably very few and very unlikely to spend money on your product (my bias)
> extra work and overheads are just not worth it.
I'd say the other way around, this tool will get you a fast, single page site in shorter time than it will take for you to decide which static site generator to use (I'm being facetious)
And once you get the hang of it, it takes less than 15 minutes.
No, you just said you don't need a CMS.
I would hand edit the HTML and deploy it on Netlify with a Parcel build step, at least that's what I've done.
parcel build *.html --public-url https://your.page
It's a complex problem, it all boils down the template you use. I usually hunt hours for free HTML/CSS templates then get mad about them and create one from scratch using some CSS framework :)
You can make simple landing pages, full sites, etc. All with as much or as little custom coding as you want.
It feels like what Squarespace sold me on back in 2011 for my first site... but it actually works, you can export the HTML if you want to self host, or use their backend. Great stuff
You mentioned you don't want to do SPA+SSR. With static pre-rendering from Next.js, there isn't a SPA. It's a fully static site.
You also mentioned having multiple pages. Rather than dealing with React Router or other SPA approaches, Next has a `/pages` directory where each file nested inside maps to a route. So `pages/about.js` is /about. It's similar to PHP in that regard.
If you don't need CMS, then you don't need Wordpress. For hosting, I would recommend Zeit's Now. They're also the creators of Next.js, so the tech pairs well together.
It's as simple as `npx create-next-app` to make the app and then `now` to deploy.
There's tons of themes available: https://www.jekyll-resources.com/
- Responsive design (important; you will get penalized otherwise)
- Minimal JavaScript (React still gets penalized)
- Metadata like image alt text, JSON-LD structured data, <meta>, and so on
This is the best you can do for SEO without external resources.
1) you install Hugo following the guide from gohugo.io/getting-started/quick-start .
2) You download any theme from themes.gohugo.io and set them up with instructions on theme's page. For example, the theme I used is for wrenches.io is hyde-hyde .
3) You change general settings for the site and add content by adding and editing files in your website's folder.
That's it! I usually host on netlify and deploy from GitHub, so it also doesn't cost me anything except for domain.
Hugo themes also allow to make many different kinds of websites, and they are fairly easy to use. Another example of a website made the same way is justfindthis.com ; the theme for it is Highlights
It enabled me to quickly implement the landing page with Vue and then build it as a static page that I deployed on Netlify. I found it easier and faster to set up than an SSR solution.
There's also a Vue-CLI version of the prerender plugin (https://www.npmjs.com/package/vue-cli-plugin-prerender-spa)
This is the key point for me. Who will be managing/updating the content ? If it is users who are non technical, then you have limited options and you can go with something like WordPress. The reason is that if you use those static site generators which are awesome btw, the non tech. users will be limited. Not to mention they will have no WYSIWYG builders to work with.
So the answer is it depends. If the people making changes/updates are technical enough, static site builders are great. If not, then go with something like WordPress.
I'm currently converting a site from static HTML to Gatsby because I got tired of having to copy-paste changes to repeating elements between the different pages. The Vue/React component approach works really well in that regard. And you don't lose out on the static element, nor the SEO.
The landing page links to: - The App at app.example.com - Docs at docs.example.com - Blog at blog.example.com
I have 0 front-end experience so this is an honest attempt at understanding why I should NOT be using the CRA for a landing page.
The landing page isn't doing much so its a very simple react app. But don't understand the implications on SEO
Also CRA comes with tons of dependencies. If all we need is to display some texts and images, as most landing pages are wont to be, it makes little sense to utilize such complex technology stack.
We've used it to build Rezi - https://rezi.io
There's no secret keys; it's just the guid identifying that form.
And hosting with Netlify maybe.
These paid tools help focusing on the content and getting things done.