
Ask HN: Best way to create a landing page? - erkken
Let&#x27;s say I have an app, residing at app.example.com. I want a separate landing page for this app at example.com.<p>This landing page should be easily managed for updating content and also have multiple pages. What stack would you use for this today?<p>I want it to be SEO optimized.<p>I use Vue for the app but feels overkill for the landing page and also not ideal in terms of SEO. I don&#x27;t feel like going the SPA+SSR way either.<p>Is wordpress still a good alternative?<p>Or maybe just a html+jquery site hosted at for example Firebase?<p>I don&#x27;t expect to update it too much with news etc so a CMS is not required.<p>What would you do?
======
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/](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...](https://tkainrad.dev/posts/using-hugo-gitlab-pages-and-
cloudflare-to-create-and-run-this-website/)

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

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

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

------
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](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!

------
fastbeef
[https://carrd.co/](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)

------
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/](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 :)

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

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

------
cdolan
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
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://nextjs.org/)
[https://zeit.co/home](https://zeit.co/home)

------
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/](https://www.jekyll-resources.com/)

------
zelly
\- 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
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

------
saviorand
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
I recently dealt with the same issue and was satisfied with prerender spa
plugin ([https://github.com/chrisvfritz/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](https://www.npmjs.com/package/vue-cli-plugin-prerender-spa))

~~~
WinonaRyder
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?

------
codegeek
"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
Since you're already experienced in Vue I would have a look at
[https://vuepress.vuejs.org/](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
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
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
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](https://turtle.community/discovery/285)

------
lbrito
I've done a few static sites with Nanoc
([https://nanoc.ws/](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
DesignModo's Startup Framework should be at least considered -
[https://designmodo.com/startup/app/](https://designmodo.com/startup/app/)

We've used it to build Rezi - [https://rezi.io](https://rezi.io)

------
stadeschuldt
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
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](https://onefiftyone.run/assets/js/landingpage.js)

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

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

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

------
Geee
I'd use Gatsby with TinaCMS. Although TinaCMS isn't quite ready for primetime
yet. [https://tinacms.org](https://tinacms.org)

And hosting with Netlify maybe.

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

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

------
amirathi
I am using Webflow and highly recommend it.

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

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

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

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

------
kaushalk
[https://www.stormviews.net](https://www.stormviews.net)

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

------
nadavram
Ask Booligoosh

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

------
kaushalk
Can Anyody tell which one is best for my youtube views
[https://www.stormviews.net](https://www.stormviews.net) or
[https://www.follower18.com](https://www.follower18.com)

