Design comparison
Solution retrospective
someone please read this, i push all the challenges on the same repository, iam a bit confusing how to deploy all of them on github pages because some of them i created with react and some of them just HTML
What challenges did you encounter, and how did you overcome them?help me
What specific areas of your project would you like help with?i`ll might help on how to using react and styling
Community feedback
- @hilmi77Posted 8 months ago
hello @Ridlo achmad ghifary!
It sounds like you're working on a collection of projects, some built with React and others with just HTML, CSS, and possibly JavaScript, and you want to deploy them all to GitHub Pages. Let's break down the steps you can take to achieve this, considering the mix of technologies you're using.
. Organize Your Repository First, you need to organize your repository to handle both React and plain HTML projects. A common approach is to have each project in its own folder at the root of the repository.
Example structure:
/my-github-repo
/react-project-1 /react-project-2 /html-project-1 /html-project-2
. Deploy HTML Projects
Deploying HTML projects to GitHub Pages is straightforward. If these projects don't rely on build steps, you can directly deploy them from a specific folder in your repository.
GitHub Pages for Project Site: You can use the gh-pages branch of your repository to host your static files. However, GitHub Pages typically serves content from the root of a repository or the /docs folder on the main branch, which means you might need a separate branch for each project or to adjust your project structure.
. Deploy React Projects
For React projects, you will need to build them first because React apps require a build process that compiles JSX and ES6 code to browser-compatible JavaScript. Here's a basic approach to deploying a React app:
Build Your React App: Navigate to your React project folder and run npm run build. This will create a build directory with your compiled project.
Deploy the Build: You have a few options for deploying the build directory:
Subdirectory on GitHub Pages: You can move the contents of the build directory to a subdirectory in your GitHub repository and push these changes. However, this approach requires configuring the homepage in your package.json and might involve complex path configurations for routing. Separate Repository/Branch: Each React project could have its own GitHub repository or branch for deployment purposes. This makes deployment simpler but fragments your projects across multiple repositories or branches.
. Using GitHub Actions for Automation GitHub Actions can automate the deployment process for both your HTML and React projects. You can set up workflows to automatically build your React apps and push the builds to the appropriate branches or directories for GitHub Pages.
. Configuring Paths and Routing Especially for React projects, ensure your application routing works well with the GitHub Pages deployment structure. You might need to use HashRouter instead of BrowserRouter for React Router to handle client-side routing correctly.
. Tips for React and Styling React: Focus on component-based development. Break down your UI into reusable components. Styling: Consider using CSS modules or styled-components for scoped and maintainable styles. This approach helps prevent style conflicts across your projects.
if you find useful this comment please click "Marked as helpful"
Happy coding
0@hilmi77Posted 8 months ago@RidloGhifary if you find useful this comment please click "Marked as helpful" :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord