HN Explorer

Ask HN: Best way to create a landing page?

91 points by erkken ↗ HN
Let's say I have an app, residing at app.example.com. I want a separate landing page for this app at example.com.

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?

64 comments

[ 3.0 ms ] story [ 148 ms ] thread
fastbeef
https://carrd.co/ is your friend here
ghego1
Their landing page doesn't work without JS enabled, not even a single line of text. I wouldn't recommend this to build a landing page.

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.

fastbeef
> I wouldn't recommend this to build a landing page. If the objective of a landing page is to reach the largest audience possible

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)

louisv
+1 to this solution. I've been using Carrd for small landing pages ever since this summer, as it is so easy to set up and use - in less than an hour you will probably have a highly-polished mockup.

And once you get the hang of it, it takes less than 15 minutes.

bluejoeco
I just logged in to say thanks, this looks like a great tool.
otherlandlabs
Personally I would go either with pure HTML/CSS/JS, or if you wanna get fancy with Gatsby + Contentful.
erkken
Thanks, had a look at Gridsome which is the vue equivalent- looks great
roosgit
In a somewhat similar situation I used PHP with `include`.

The structure was something like this:

  - index.php
  - header.php
  - sidebar.php
  - footer.php
  - page-1.php
  - page-2.php
  ...
In `header.php` I used variables for the title, description, etc. and then in each page I specified the values for those variables. This way each page had the same header HTML code, but with a different title, description and so on.
Jaruzel
I do my PHP in completely different way, which in turn was the way I did ASP back in the day, also in a weird way.

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?

martin_a
Yes, I've done it that way before. Actually just did a few weeks ago when building a frontend for a WordPress site. The frontend consumes the API and takes care of lightning-fast delivery by cutting out all the normal WordPress stuff that normally runs, when building a theme.
sethammons
Heh. That is what I was doing in 2001. Wild to it in the wild still. Now I am only in the back end.
raulgracia
If you already know and you're familiar with Vue, why don't you use Nuxt.js? You can generate a SPA or a PWA if you don't want to have the SSR version.
erkken
Yeah good question, maybe it feels overkill. I also found Gridsome which also looks very interesting
xemoka
I’ve found for small sites, building a vue SPA and using react-snap to generate the pre-rendered static pages works great, and cut out a lot of the overhead I felt with gridsome.
leerob
Personally, I would use Next.js. It allows you have dynamic pages (e.g. your app) alongside static pages (e.g. landing page). Since it's server-side rendered, it's great for SEO.

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.

https://nextjs.org/ https://zeit.co/home

nkristoffersen
I do a lot of GatsbyJS. Now adding Contentful for all landing pages so marketing folk can edit content.
Geee
Does it work in practice for the marketing folk?
TKAB
An option that I like to use is Middleman (or any other static site generator) for creating the pages and Netlify for hosting, all for free even with your own domain and HTTPS.

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

_31
I think Netlify has an amazing product and have been looking into using Gatsby for some projects. Thanks for linking those templates!
jcoffland
How about pug.js for HTML templating and Stylus or Less for the CSS. Then just generate a static site. Static sites are fast and fast is always good SEO.
tiborsaas
> Is wordpress still a good alternative?

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.

https://parceljs.org/

    parcel build *.html --public-url https://your.page
> I want it to be SEO optimized.

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 :)

martin_a
Take some Bootstrap 4 Template and just stick to HTML + CSS. It's enough for a first impression, don't go for the tech stack overkill.
elkynator
just use www.carrd.co You will get your lander up within half day with all content. Easy to update, easy to learn. Saved a lot of hours and days for me so far. Nothing comes close for me.
corentin88
I was about to recommend Carrd as well. Also Unbounce.com seems like an obvious choice.

These paid tools help focusing on the content and getting things done.

tkainrad
I recommend using a static site generator. It brings precisely the features you ask for:

  - 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)
Personally, I like Hugo. They have an amazing gallery of free templates: https://themes.gohugo.io/

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...

gii2
Hugo is great choice.

I host my hugo sites on Azure Blob Storage for few cents (literally) per month.

austhrow743
Is hugo appropriate for a reasonably technically competent non-programmer?
tkainrad
If you are happy with a given template and only want to make minor modifications (i.e. coloring, logos,...) it should still be a good choice. But the same goes also for e.g. Wordpress.
alien1993
I use Hugo too but I suggest anyone pay attention since they can introduce breaking changes with minor versions. With v0.58.0 they broke lots of themes, including mine, so if you want to create a theme for it, or even use an existing one, remember that just a small update might break it.

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/

melicerte
I'd like to mention Zola[1], a fast static site generator in a single binary with everything built-in. It is a replacement, improvement to Hugo and is written in rust.

We are using Zola for two static sites.

[1] https://www.getzola.org

roland35
Thanks for this guide! I was able to follow it easily and hope to try it out soon.
r_singh
Wordpress is a great option, many large companies use Wordpress for landing pages (also the most popular on Builtwith). Its CMS also makes it easy to set up a blog, update pages, etc.

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

woutr_be
I would personally use Jekyll, it's pretty easy to build, free to host (thanks to Netlify or Github pages), perfect for SEO since it's all static content.

There's tons of themes available: https://www.jekyll-resources.com/

te_chris
Instapage. We use it for all our PPC landing pages and it's a great, 0 code option.
rorykoehler
HTML and js is the way to go if you are a dev. All the other tools are better suited for non-technical people.
Geee
I'd use Gatsby with TinaCMS. Although TinaCMS isn't quite ready for primetime yet. https://tinacms.org

And hosting with Netlify maybe.

[dead] max651
By the end of the course, you'll clearly understand the 15 proven principles of a successful landing page You'll learn how to research your audience using 3 industry standard analytical and research tools, to craft a more compelling landing page message You'll learn about the most popular tools to create landing pages, and how to choose the right approach, according to your current budget, available time and skill level
lbrito
I've done a few static sites with Nanoc (https://nanoc.ws/), a Ruby gem, and I really enjoy the results. It has quite a few useful helpers for stuff like XMLSitemap, which might be useful for you, and has filters that compile several formats (markdown, erb etc) into HTML.
afloatboat
Since you're already experienced in Vue I would have a look at https://vuepress.vuejs.org/. I don't have any hands-on experience, but I've only heard positive things about it.

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.

Lucasoato
Does anyone know if using Angular with Server-Side-Rendering is a good idea? Angular dev here
thojest
I think the hardest part is the design of nice images and graphics, if you are not a designer. You can for example use this open-source collection of awesome svg illustrations. They are free of attribution and really good looking. https://turtle.community/discovery/285