6 ms·

Guide to becoming a modern front end developer

116 points by Lilian_Lee 7y ago

erikschoster 7y ago
It’s nice to a number of articles making it to the front page that prioritize fundamentals, but it made me sad to see accessibility listed here as a second class topic. It goes well beyond HTML annotations. Opening the door wide shouldn’t be an afterthought.
- johnnylambada 7y ago
  Please. Most books and articles don't mention accessibility at all. Accessibility is important but is it really as important as understanding http or other main line topics?
  - ddnb 7y ago
    It really should be, people with disabilities can really have trouble navigating websites, the least we can do is make it a relative smooth experience.
    - johnnylambada 7y ago
      I don't doubt that. I even said as much. But one has to understand how to build a web site before they can understand how to build a website for a specific class of individual.
      - urxvtcd 7y ago
        The thing is, it's not a specific class of individuals, these are just people. They deserve access to online content just as everybody else.
      - mattlondon 7y ago
        Ideally you should design in and implement accessibility from the start. Doing the site first then accessibility second usually either means accessibility simply doesn't get done at all (since people forget and/or priorities change before it is done), or it is retrofitted in a really half-assed way. This is really important stuff (both legally these days in many countries, but also ethically) so giving it second-billing is probably a mistake.
    - erikschoster 7y ago
      For sure. Accessibility should also encompass things like making content or functionality usable on terrible networks and ancient devices.
bound008 7y ago
The backend one is GOLD. Literal GOLD. https://roadmap.sh/backend https://roadmap.sh/backend
- mikeg8 7y ago
  Interesting. Connected the the “Learn a Language” box, the only one the author personally recommends is Javascript. All others are labeled as alternate options and while I know this is a subjective resource, that still seems odd to me.
- Polylactic_acid 7y ago
  Following this chart it looks like I need to set up rabbitMQ and use graphQL before I learn how to set up nginx.
  - DeathArrow 7y ago
    You also seem to have to master neo4j before learning about web sockets. :D
gorpomon 7y ago
These flowchart guides to being an X developer are posted on here periodically, and they're often pilloried for being bloated and intimidating. I think they're plenty fine, they just require the right framing. The keyword for this one is "modern", and the keyword for almost all of these comprehensive lists should be "senior". As a senior front end engineer I have exposure to almost every item on this list and can speak to either a time I've used them, or why I opt not to use them (Tailwind CSS, Gatsby.JS, Rollup, and some others). As a newer developer, you are not expected to have exposure to most items in the list. Rather we just want you to be on your way to being highly proficient in the important ones. Also, picking one item from a group (items connected to a block by dotted lines are in the same group) and learning it well is sufficient. In learning one of those well you'll get scant exposure to the others (via reading articles and such), and from that you can make a switch at some point, or better know why you won't be switching. These charts can be valuable for understanding the scope of a profession, but they shouldn't be intimidating.
sunsetSamurai 7y ago
It would be great if it had a list of resources attached to every concept, sometimes it's hard to know where to study from.
JimDabell 7y ago
This is a disaster and more likely to put a newbie off or confuse them than to help them. Why is the largest callout dedicated to WebAssembly, noting it as not ready yet? Why is "Using DevTools" near the bottom, branched off PWAs instead of near the top? Why are server-side things like Apollo on there, above things like static site generators? Why are mobile and desktop applications on there? There's a stack of "Redux, MobX, RxJS, NgRx, VueX" boxes along one side with a tick next to each one. Who is that supposed to be helping? How is a newbie trying to get into front-end development meant to make sense of this without being completely overwhelmed? I know developers with years of experience that would be scared by this; it's one gigantic imposter syndrome trigger. In order for a resource like this to be effective, it needs to prioritise and contextualise. This reads more like a "look at all the things I know about" boast. Less is more. A resource that aims to actually help newbies should be at most a quarter of the size and actually provide context and priorities.
- howigottomemph 7y ago
  I also find the ordering a bit strange in some cases. If you look at it as a bottoms up documentation of how technologies build on each other, that's one thing. But learning things in this order would have been overwhelming to me. I've bumped up against every technology on this list, but mostly as they've come up on projects.
- mikeg8 7y ago
  I totally agree. Calling it a step by step guide without providing any context to support the technologies makes this unusable to most beginners. It may have utility for a mid-level dev trying to make sure they’re well polished, but it’s not for the novice, and needs much more to be truly useful.
- aggie 7y ago
  As a non-developer who has a career track-change in the back of my mind, I can't speak to the accuracy of the information, but I disagree with your take that it needs to be pared down. This kind of extended view of the path forward is exactly what seems to be missing in the endless world of beginner tutorials. Now maybe the truth is this kind of path simply can't be accurately laid out like this. But don't not attempt it just because it might be intimidating for some.
deleted 7y ago
[deleted]
justlexi93 7y ago
Learn HTML and CSS. And become good at it. Build things. Playing around with (small) UI elements is one thing. Read, read, read. There's more to front-end development than building a website. Know your tools. Version control will save your life.... Be the middleman. Do not rush.
tzmudzin 7y ago
I see a commendable effort, but am very concerned about the treatment of security/privacy topics. If we educate our front-end developers like that, web security will remain an unwanted bolt-on providing minimum protection and no regard for privacy. It is a shame these topics are not addressed in more detail, as they will likely remain more useful than the tool of the day. May I suggest treating that as an opportunity?
daenz 7y ago
I've been teaching my partner to code lately (Python). She's picking it up fairly quickly, but what I am learning is just how damn complicated and unapproachable we've made everything. There's layers upon layers of outdated/wrong documentation online. Frameworks/best practices/patterns falling in and out of favor. Giving a new person the abbreviated version of why some things are the way they are is a really difficult task. It's demoralizing to me because I know how demoralizing it would be to her if she knew the breadth of things she needs to learn to even have a hint of competence. I've got no answers, but this roadmap brought out all of those feelings.
- jamil7 7y ago
  I’m going through the exact same thing with my girlfriend. She has a fair bit of scientific programming experience from uni but wanted to build a small hobby app. I set her up with react native and expo thinking that would be the easiest and quickly found myself struggling to explain in a simple way why it worked the way it did without delving into what came before and what it’s built on top of. I’m struggling to know if this is the right way to introduce newcomers to building apps or if going back to fundamentals and building the app natively is better.
ahnick 7y ago
I remember when being a frontend developer meant having gone through most of the material on the HTMLGoodies site. Life was so much simpler in the 90s. :)
mattlondon 7y ago
This seems to be very specific to certain libraries and frameworks (mainly react and it's ecosystem it seems). This I feel is a mistake. Not so long ago AngularJS was the framework, and now it is basically legacy-/maintenance-only (...and before that jQuery-based things). React will suffer the same fate one day too ... the same way that it happens to all things in tech eventually. Plus react is not the only game in town either, and you may never even touch it in your work so you might be wasting time learning all the react ecosystem things on that list. I think it would be better for new developers to focus more on the core fundamental techs (while cognizant that these techs may change in the future!) and transferable skills first rather than bothering to even think about react and it's ecosystem: - know inside-out what happens front-to-back when you put in https://example.com https://example.com in your browser and the page appears (so DNS, TCP/IP, TLS, HTTP, HTML, DOM etc) - learn HTML + CSS (semantics, layout approaches, accessibility etc) - learn how to run your own server (Apache, nginx, iis or whatever - doesn't matter) so you know how things get hosted and served. Do some basic server side "hello world" thing using PHP/C#/Ruby/Java/whatever + a DB to learn how server-side rendering happens, then try just returning JSON instead of rendered-HTML. - learn JavaScript and then get really really comfortable doing lots of JavaScript. Also learn how JavaScript + HTML DOM work together. - Optionally now learn typescript and if you're not from a technical background also learn about testing, build tools and source control (these are a given for experienced Devs from other disciplines) - learn the OWASP top 10 security problems, and strategies/techniques to mitigate them. - Don't forget basic UX fundamentals in case you find yourself being the designer as well as the developer (happens a lot for better or worse) ... now you are ready to go and use whatever the current flavour of the month library is both for today and for tomorrow. Good luck to any aspiring Devs! Frontend work is really fun and satisfying work IMO. Stick at it! :)
- thrwaway69 7y ago
  Add functional programming to the list.
yumario 7y ago
See a lot of criticism here. For a math new grad who wants to break in software development, what similar guide would HN recommend? I'm specially interested in backed. I prefer the guide to be extensive like this one because it give me a sense of what I know and don't know.
- mikeg8 7y ago
  There is a comment in this thread that has a link to the same map, but for back end.
- DeathArrow 7y ago
  Take a look at Stefan Mischook videos. They are rather general, targeted to beginners and can teach you what to learn and in what order. https://www.youtube.com/user/killerphp/search?query=web+development https://www.youtube.com/user/killerphp/search?query=web+deve... In short, in any kind of programming, you have to learn the basics first. For web frontend, these I think will be: HTML, latest CSS spec, Javascript ES6. After that you can pick up a small library like jQuery. After that, you will know by yourself if you need to learn a particular JS framework. For backend: A bit of HTML/CSS/JS, a language usable on server side (C#, PHP, Python, maybe Java, maybe JS), SQL and one RDBMS (Postgres, MySQL, SQL Server etc.). After that you can learn about REST, CORS and more advanced stuff. If you reach this point, you will know by yourself what you need to learn next.
kingludite 7y ago
As much as I hate most things onthere I have to applaud the overview. Now for the jokes since I cant help myself: 1 - I feel the map needs pictures of sea monsters and mermaids. 2 - Imagine how much more useful this would be printed on paper. 3 - View the source of the page and "woah!" with me, all that to display an <img>? 4 - Which one of all these tools makes such wonderful flowcharts? 5 - Why cant html make such beautiful pages? 6 - I tried clicking on one of the many boxes expecting a tutorial. Having to look up the entries on a different page is really not-done in IT. 7 - I tried copying the text but it is an image. (see 4th & 5th item on the right) 8 - "Find the detailed version of this roadmap on..." wait.. I'm already on roadmap.sh? You could put a div with a white background-color over the image to cover up this [extra] bit of confusion (Even I don't know if I'm joking anymore) 9 - At the end above "keep learning" it should say: "static html" 10 - Where do I buy the T shirt? Conclusion: Well done! Ill be visiting this page many times! Thanks for making it!
- viklove 7y ago
  > 2 - Imagine how much more useful this would be printed on paper. Do you want me to fax this webpage to you?
thrwaway69 7y ago
Road map to frontend development: 1. Learn about internet (domains, http, browsers, servers etc) 2. Build something with html and css. Learn about accessibility (so many people don't properly add all the properties on their html tags) 3. Learn javascript to add interactivity. 4. Get a book for functional programming. Most modern ui frameworks use a lot of functional concepts. Learn a functional language too. (Elixir is pretty) 5. Deployment, stuff that was supposed to be backend engineers job but now you can do it. Functions, cloud stores, cdns, etc. 5. Look for jobs on the job boards and see which framework is trending right now. 6. Build a HN clone in it. Thank you for coming to my hn talk.
- DeathArrow 7y ago
  You can't build a HN clone using the JS frontend framework of the day because HN isn't an SPA. To build a HN clone you can use a MVC framework like Laravel, ASP.Net or Django.
  - thrwaway69 7y ago
    Uh no. You definitely can. MVC isn't unique to those frameworks or languages. It's just an architecture. You can find many MVC frameworks in js. Secondly, you don't need MVC architecture to build HN. You can use a different pattern and still have a server side rendered app that reloads on each page click. Also, afaik HN uses firebase to expose an api. You can directly store data to firebase from client side. So you still don't need those full stack frameworks to build HN.
adamleithp 7y ago
I know Angular has it's place in this world, but I just don't like it, and will never like it. React, Vue, or Svelte for me (Coming from a front end to full stack)
DeathArrow 7y ago
So if you, God forbid, use MVC to generate views on the server side or use plain JS and jQuery that means you are using antiquated, obsolete, outdated methods of web development? What if you are bypassing JS and target web assembly using Blazor? Is Blazor obsolete before even being officially released? I strongly believe in "right tool for the job" and while Angular & React & NPM & Node can be the right tool for a particular job, I don't think they are the answers to all web development needs, modern or antiquated. The same with React Native. I don't think that every mobile app should be written in React Native just because it exists, it's JS and it's "modern". Somehow I won't be surprised if someone will release a "modern" JS framework targeting systems programming. And people trying to write game engines, operating systems and process images with it because it's modern.
nojvek 7y ago
We’ve seen this before. The guide to modern front-end isn’t hard. Learn html, with css for styling and raw vanilla JS for a bit of interactivity. Learn git so you don’t lose your work. May be deploy with GitHub pages. That’s it, everything else will come later when you experience the pain for it.

116 points by Lilian_Lee 7y ago

It’s nice to a number of articles making it to the front page that prioritize fundamentals, but it made me sad to see accessibility listed here as a second class topic. It goes well beyond HTML annotations. Opening the door wide shouldn’t be an afterthought.

johnnylambada 7y ago
Please. Most books and articles don't mention accessibility at all. Accessibility is important but is it really as important as understanding http or other main line topics?
- ddnb 7y ago
  It really should be, people with disabilities can really have trouble navigating websites, the least we can do is make it a relative smooth experience.
  - johnnylambada 7y ago
    I don't doubt that. I even said as much. But one has to understand how to build a web site before they can understand how to build a website for a specific class of individual.
    - urxvtcd 7y ago
      The thing is, it's not a specific class of individuals, these are just people. They deserve access to online content just as everybody else.
    - mattlondon 7y ago
      Ideally you should design in and implement accessibility from the start. Doing the site first then accessibility second usually either means accessibility simply doesn't get done at all (since people forget and/or priorities change before it is done), or it is retrofitted in a really half-assed way. This is really important stuff (both legally these days in many countries, but also ethically) so giving it second-billing is probably a mistake.
  - erikschoster 7y ago
    For sure. Accessibility should also encompass things like making content or functionality usable on terrible networks and ancient devices.

bound008 7y ago

The backend one is GOLD. Literal GOLD. https://roadmap.sh/backend https://roadmap.sh/backend

mikeg8 7y ago
Interesting. Connected the the “Learn a Language” box, the only one the author personally recommends is Javascript. All others are labeled as alternate options and while I know this is a subjective resource, that still seems odd to me.
Polylactic_acid 7y ago
Following this chart it looks like I need to set up rabbitMQ and use graphQL before I learn how to set up nginx.
- DeathArrow 7y ago
  You also seem to have to master neo4j before learning about web sockets. :D

gorpomon 7y ago

These flowchart guides to being an X developer are posted on here periodically, and they're often pilloried for being bloated and intimidating. I think they're plenty fine, they just require the right framing. The keyword for this one is "modern", and the keyword for almost all of these comprehensive lists should be "senior". As a senior front end engineer I have exposure to almost every item on this list and can speak to either a time I've used them, or why I opt not to use them (Tailwind CSS, Gatsby.JS, Rollup, and some others). As a newer developer, you are not expected to have exposure to most items in the list. Rather we just want you to be on your way to being highly proficient in the important ones. Also, picking one item from a group (items connected to a block by dotted lines are in the same group) and learning it well is sufficient. In learning one of those well you'll get scant exposure to the others (via reading articles and such), and from that you can make a switch at some point, or better know why you won't be switching. These charts can be valuable for understanding the scope of a profession, but they shouldn't be intimidating.

sunsetSamurai 7y ago

It would be great if it had a list of resources attached to every concept, sometimes it's hard to know where to study from.

JimDabell 7y ago

This is a disaster and more likely to put a newbie off or confuse them than to help them. Why is the largest callout dedicated to WebAssembly, noting it as not ready yet? Why is "Using DevTools" near the bottom, branched off PWAs instead of near the top? Why are server-side things like Apollo on there, above things like static site generators? Why are mobile and desktop applications on there? There's a stack of "Redux, MobX, RxJS, NgRx, VueX" boxes along one side with a tick next to each one. Who is that supposed to be helping? How is a newbie trying to get into front-end development meant to make sense of this without being completely overwhelmed? I know developers with years of experience that would be scared by this; it's one gigantic imposter syndrome trigger. In order for a resource like this to be effective, it needs to prioritise and contextualise. This reads more like a "look at all the things I know about" boast. Less is more. A resource that aims to actually help newbies should be at most a quarter of the size and actually provide context and priorities.

howigottomemph 7y ago
I also find the ordering a bit strange in some cases. If you look at it as a bottoms up documentation of how technologies build on each other, that's one thing. But learning things in this order would have been overwhelming to me. I've bumped up against every technology on this list, but mostly as they've come up on projects.
mikeg8 7y ago
I totally agree. Calling it a step by step guide without providing any context to support the technologies makes this unusable to most beginners. It may have utility for a mid-level dev trying to make sure they’re well polished, but it’s not for the novice, and needs much more to be truly useful.
aggie 7y ago
As a non-developer who has a career track-change in the back of my mind, I can't speak to the accuracy of the information, but I disagree with your take that it needs to be pared down. This kind of extended view of the path forward is exactly what seems to be missing in the endless world of beginner tutorials. Now maybe the truth is this kind of path simply can't be accurately laid out like this. But don't not attempt it just because it might be intimidating for some.

deleted 7y ago

[deleted]

justlexi93 7y ago

Learn HTML and CSS. And become good at it. Build things. Playing around with (small) UI elements is one thing. Read, read, read. There's more to front-end development than building a website. Know your tools. Version control will save your life.... Be the middleman. Do not rush.

tzmudzin 7y ago

I see a commendable effort, but am very concerned about the treatment of security/privacy topics. If we educate our front-end developers like that, web security will remain an unwanted bolt-on providing minimum protection and no regard for privacy. It is a shame these topics are not addressed in more detail, as they will likely remain more useful than the tool of the day. May I suggest treating that as an opportunity?

daenz 7y ago

I've been teaching my partner to code lately (Python). She's picking it up fairly quickly, but what I am learning is just how damn complicated and unapproachable we've made everything. There's layers upon layers of outdated/wrong documentation online. Frameworks/best practices/patterns falling in and out of favor. Giving a new person the abbreviated version of why some things are the way they are is a really difficult task. It's demoralizing to me because I know how demoralizing it would be to her if she knew the breadth of things she needs to learn to even have a hint of competence. I've got no answers, but this roadmap brought out all of those feelings.

jamil7 7y ago
I’m going through the exact same thing with my girlfriend. She has a fair bit of scientific programming experience from uni but wanted to build a small hobby app. I set her up with react native and expo thinking that would be the easiest and quickly found myself struggling to explain in a simple way why it worked the way it did without delving into what came before and what it’s built on top of. I’m struggling to know if this is the right way to introduce newcomers to building apps or if going back to fundamentals and building the app natively is better.

ahnick 7y ago

I remember when being a frontend developer meant having gone through most of the material on the HTMLGoodies site. Life was so much simpler in the 90s. :)

mattlondon 7y ago

This seems to be very specific to certain libraries and frameworks (mainly react and it's ecosystem it seems). This I feel is a mistake. Not so long ago AngularJS was the framework, and now it is basically legacy-/maintenance-only (...and before that jQuery-based things). React will suffer the same fate one day too ... the same way that it happens to all things in tech eventually. Plus react is not the only game in town either, and you may never even touch it in your work so you might be wasting time learning all the react ecosystem things on that list. I think it would be better for new developers to focus more on the core fundamental techs (while cognizant that these techs may change in the future!) and transferable skills first rather than bothering to even think about react and it's ecosystem: - know inside-out what happens front-to-back when you put in https://example.com https://example.com in your browser and the page appears (so DNS, TCP/IP, TLS, HTTP, HTML, DOM etc) - learn HTML + CSS (semantics, layout approaches, accessibility etc) - learn how to run your own server (Apache, nginx, iis or whatever - doesn't matter) so you know how things get hosted and served. Do some basic server side "hello world" thing using PHP/C#/Ruby/Java/whatever + a DB to learn how server-side rendering happens, then try just returning JSON instead of rendered-HTML. - learn JavaScript and then get really really comfortable doing lots of JavaScript. Also learn how JavaScript + HTML DOM work together. - Optionally now learn typescript and if you're not from a technical background also learn about testing, build tools and source control (these are a given for experienced Devs from other disciplines) - learn the OWASP top 10 security problems, and strategies/techniques to mitigate them. - Don't forget basic UX fundamentals in case you find yourself being the designer as well as the developer (happens a lot for better or worse) ... now you are ready to go and use whatever the current flavour of the month library is both for today and for tomorrow. Good luck to any aspiring Devs! Frontend work is really fun and satisfying work IMO. Stick at it! :)

thrwaway69 7y ago
Add functional programming to the list.

yumario 7y ago

See a lot of criticism here. For a math new grad who wants to break in software development, what similar guide would HN recommend? I'm specially interested in backed. I prefer the guide to be extensive like this one because it give me a sense of what I know and don't know.

mikeg8 7y ago
There is a comment in this thread that has a link to the same map, but for back end.
DeathArrow 7y ago
Take a look at Stefan Mischook videos. They are rather general, targeted to beginners and can teach you what to learn and in what order. https://www.youtube.com/user/killerphp/search?query=web+development https://www.youtube.com/user/killerphp/search?query=web+deve... In short, in any kind of programming, you have to learn the basics first. For web frontend, these I think will be: HTML, latest CSS spec, Javascript ES6. After that you can pick up a small library like jQuery. After that, you will know by yourself if you need to learn a particular JS framework. For backend: A bit of HTML/CSS/JS, a language usable on server side (C#, PHP, Python, maybe Java, maybe JS), SQL and one RDBMS (Postgres, MySQL, SQL Server etc.). After that you can learn about REST, CORS and more advanced stuff. If you reach this point, you will know by yourself what you need to learn next.

kingludite 7y ago

As much as I hate most things onthere I have to applaud the overview. Now for the jokes since I cant help myself: 1 - I feel the map needs pictures of sea monsters and mermaids. 2 - Imagine how much more useful this would be printed on paper. 3 - View the source of the page and "woah!" with me, all that to display an <img>? 4 - Which one of all these tools makes such wonderful flowcharts? 5 - Why cant html make such beautiful pages? 6 - I tried clicking on one of the many boxes expecting a tutorial. Having to look up the entries on a different page is really not-done in IT. 7 - I tried copying the text but it is an image. (see 4th & 5th item on the right) 8 - "Find the detailed version of this roadmap on..." wait.. I'm already on roadmap.sh? You could put a div with a white background-color over the image to cover up this [extra] bit of confusion (Even I don't know if I'm joking anymore) 9 - At the end above "keep learning" it should say: "static html" 10 - Where do I buy the T shirt? Conclusion: Well done! Ill be visiting this page many times! Thanks for making it!

viklove 7y ago
> 2 - Imagine how much more useful this would be printed on paper. Do you want me to fax this webpage to you?

thrwaway69 7y ago

Road map to frontend development: 1. Learn about internet (domains, http, browsers, servers etc) 2. Build something with html and css. Learn about accessibility (so many people don't properly add all the properties on their html tags) 3. Learn javascript to add interactivity. 4. Get a book for functional programming. Most modern ui frameworks use a lot of functional concepts. Learn a functional language too. (Elixir is pretty) 5. Deployment, stuff that was supposed to be backend engineers job but now you can do it. Functions, cloud stores, cdns, etc. 5. Look for jobs on the job boards and see which framework is trending right now. 6. Build a HN clone in it. Thank you for coming to my hn talk.

DeathArrow 7y ago
You can't build a HN clone using the JS frontend framework of the day because HN isn't an SPA. To build a HN clone you can use a MVC framework like Laravel, ASP.Net or Django.
- thrwaway69 7y ago
  Uh no. You definitely can. MVC isn't unique to those frameworks or languages. It's just an architecture. You can find many MVC frameworks in js. Secondly, you don't need MVC architecture to build HN. You can use a different pattern and still have a server side rendered app that reloads on each page click. Also, afaik HN uses firebase to expose an api. You can directly store data to firebase from client side. So you still don't need those full stack frameworks to build HN.

adamleithp 7y ago

I know Angular has it's place in this world, but I just don't like it, and will never like it. React, Vue, or Svelte for me (Coming from a front end to full stack)

DeathArrow 7y ago

So if you, God forbid, use MVC to generate views on the server side or use plain JS and jQuery that means you are using antiquated, obsolete, outdated methods of web development? What if you are bypassing JS and target web assembly using Blazor? Is Blazor obsolete before even being officially released? I strongly believe in "right tool for the job" and while Angular & React & NPM & Node can be the right tool for a particular job, I don't think they are the answers to all web development needs, modern or antiquated. The same with React Native. I don't think that every mobile app should be written in React Native just because it exists, it's JS and it's "modern". Somehow I won't be surprised if someone will release a "modern" JS framework targeting systems programming. And people trying to write game engines, operating systems and process images with it because it's modern.

nojvek 7y ago

We’ve seen this before. The guide to modern front-end isn’t hard. Learn html, with css for styling and raw vanilla JS for a bit of interactivity. Learn git so you don’t lose your work. May be deploy with GitHub pages. That’s it, everything else will come later when you experience the pain for it.