![]() First get an API token following the instructions on Creating a personal access token - GitHub Docs Note: As my repository was private while making this blog I enabled the whole repo scope.travis.yml to your repository, you need to add the github_token (needed to push to your gh-pages branch) variable to your Travis CI settings. Language: node_js # Node.js based project node_js: - 12 # Level of Node.js to use cache: directories: - node_modules # Cache the node_modules folder for quicker build times script: - npm run build # Runs next build - npm run export # Runs next export and generates the out directory - touch out/.nojekyll # Creates a file telling Github not to build the project using Jekyll deploy: provider: pages # Informs Travis this is a deployment to GitHub Pages skip_cleanup: true # Prevents Travis from resetting the working directory made during the build github_token: $github_token # GitHub access token to use when pushing to the gh-pages branch local_dir: out # Directory to push to the gh-pages branch on: # Only deploy when the build is on master or main branch - two common default branch names # If you're using a different branch name, add it here all_branches: true condition: $TRAVIS_BRANCH =~ ^(master|main)$įor more information the official Travis Github Pages docs Add the following (without the comments):.travis.yml file in the top directory of your Github repository. The following documents this process and how to use secret environment variables with a Travis build. Creating the Travis buildĬonnecting Travis to a GitHub repository is as simple as creating a. Now that the technologies used in this blog have been introduced, let's deploy our Next.js app to GitHub Pages. From there you can use tools such as serve to run your app. It generates the HTML into an out directory. Next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server. It’s free for open-source projects and integrates automatically with Github. Travis CI is a hosted continuous integration service used to build and test software projects hosted at GitHub and Bitbucket. GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub optionally runs the files through a build process and publishes a website. Building a Travis pipeline to build the website and push it to a gh-pages branch. ![]() ![]() Using next export to convert the Next.js project to a static website.This blog post documents the process of taking a Next.js project and hosting it on GitHub pages. The re-implementation of Wallis Consultancy into a Next.js application is complete. The finished website (hosted on GitHub Pages): Having said that, GitHub Pages is 100% still a good place to host your Next.js project! I've kept a version of Wallis Consultancy hosted on GitHub pages for this blog and have updated all links to Wallis Consultancy below. Essentially, Next.js integrates with Vercel a lot better than with GitHub Pages. I wrote a post describing my motivations for doing so which you can read here. This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework to improve performance, reduce costs and increase my workflow for future changes.Ģ021 Update I have moved Wallis Consultancy from GitHub Pages to Vercel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |