Ask HN: Best way to create a landing page?

91 points by erkken 6 years ago | 62 comments

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?

tkainrad 6 years ago |

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

melicerte 6 years ago | |

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

alien1993 6 years ago | |

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/

gii2 6 years ago | |

Hugo is great choice.

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

roland35 6 years ago | |

Thanks for this guide! I was able to follow it easily and hope to try it out soon.

robtherobber 6 years ago | |

For others interested, here is a list of flat file CMSs: https://github.com/ahadb/flat-file-cms

austhrow743 6 years ago | |

Is hugo appropriate for a reasonably technically competent non-programmer?

tkainrad 6 years ago | | |

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.

r_singh 6 years ago |

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

ademcan 6 years ago |

I always start with https://html5up.net/ where you have a nice selection of free HTML5+CSS templates! I hope it helps.

TKAB 6 years ago |

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 6 years ago | |

I think Netlify has an amazing product and have been looking into using Gatsby for some projects. Thanks for linking those templates!

roosgit 6 years ago |

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 6 years ago | |

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 6 years ago | | |

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.

benbristow 6 years ago | | |

That's nasty. Why not just use a templating language and pump in the values you need?

https://twig.symfony.com/

sethammons 6 years ago | |

Heh. That is what I was doing in 2001. Wild to it in the wild still. Now I am only in the back end.

fastbeef 6 years ago |

https://carrd.co/ is your friend here

ghego1 6 years ago | |

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 6 years ago | | |

> 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 6 years ago | |

+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 6 years ago | |

I just logged in to say thanks, this looks like a great tool.

el_dev_hell 6 years ago | |

Man... that's an awesome tool

tiborsaas 6 years ago |

> 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 6 years ago |

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.

cdolan 6 years ago |

Surprised webflow.com has not been mentioned yet. Been using it for years and its an absolute Wordpress killer.

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

leerob 6 years ago |

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

woutr_be 6 years ago |

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/

zelly 6 years ago |

- Static HTML5 on a CDN (speed)

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

otherlandlabs 6 years ago |

Personally I would go either with pure HTML/CSS/JS, or if you wanna get fancy with Gatsby + Contentful.

erkken 6 years ago | |

Thanks, had a look at Gridsome which is the vue equivalent- looks great

saviorand 6 years ago |

Hugo can also serve as a no-code/low-code solution:

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

ciocarlia 6 years ago |

I recently dealt with the same issue and was satisfied with prerender spa plugin (https://github.com/chrisvfritz/prerender-spa-plugin).

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)

WinonaRyder 6 years ago | |

I too recommend prerendering as a general solution to the problem. You already have to implement it such that it works in the browser, so why add complexity with SSR, switching frameworks or worse: adding another framework/language/CMS just for the landing page?

laurentdc 6 years ago |

I just use Wordpress with a plain theme and some builder, e.g. OceanWP + Elementor. Little code needed, decent plugin ecosystem (contact forms, cookie warning, seo stuff), one-click deploy on DigitalOcean, Linode...

codegeek 6 years ago |

"should be easily managed for updating content "

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.

afloatboat 6 years ago |

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.

ashpreetbedi 6 years ago |

Could someone explain to me why using a react app built using CRA is bad in this case? I have a similar use case where the app is on app.example.com (built using CRA) and I have a landing page (also built using CRA) on example.com

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

stockkid 6 years ago | |

It might be because CRA does not have server side rendering and it is hard for some search engines to index pages if they are entirely rendered the client side.

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.

thojest 6 years ago |

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

lbrito 6 years ago |

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.

jacob_rezi 6 years ago |

DesignModo's Startup Framework should be at least considered - https://designmodo.com/startup/app/

We've used it to build Rezi - https://rezi.io

stadeschuldt 6 years ago |

To all the people using a static site generator. How do collect emails from interested people? Is there a way to easily integrate this into the static site? Ideally it would be a simple form, that collects the data and stores it somewhere? Google Forms comes to mind but it would integrate that nicely into the UI.

bszupnick 6 years ago | |

I made a landing page just HTML and CSS that integrated with Hubspot forms. You can check it out: https://onefiftyone.run/assets/js/landingpage.js

There's no secret keys; it's just the guid identifying that form.

nkristoffersen 6 years ago |

I do a lot of GatsbyJS. Now adding Contentful for all landing pages so marketing folk can edit content.

Geee 6 years ago | |

Does it work in practice for the marketing folk?

Geee 6 years ago |

I'd use Gatsby with TinaCMS. Although TinaCMS isn't quite ready for primetime yet. https://tinacms.org

And hosting with Netlify maybe.

raulgracia 6 years ago |

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 6 years ago | |

Yeah good question, maybe it feels overkill. I also found Gridsome which also looks very interesting

xemoka 6 years ago | | |

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.

jcoffland 6 years ago |

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.

amirathi 6 years ago |

I am using Webflow and highly recommend it.

rorykoehler 6 years ago |

HTML and js is the way to go if you are a dev. All the other tools are better suited for non-technical people.

pryelluw 6 years ago |

Wordpress with a site builder plugin, a/b testing pligin, and seo plugin is what Id go with.

Lucasoato 6 years ago |

Does anyone know if using Angular with Server-Side-Rendering is a good idea? Angular dev here

ufarooqi 6 years ago |

You can use Webflow or if you want something quickly then try Product Hunt’s Ship.

kaushalk 6 years ago |

https://www.stormviews.net

te_chris 6 years ago |

Instapage. We use it for all our PPC landing pages and it's a great, 0 code option.

nadavram 6 years ago |

Ask Booligoosh

elkynator 6 years ago |

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 6 years ago | |

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.

kaushalk 6 years ago |

Can Anyody tell which one is best for my youtube views https://www.stormviews.net or https://www.follower18.com